javascript - poner - Eliminar el valor predeterminado de un texto de entrada al hacer clic

poner valor a un input javascript

Question

Tengo un texto de entrada:

<input name="Email" type="text" id="Email" value="[email protected]" />

Quiero poner un valor predeterminado como "¿Cuál es su pregunta de programación? Sea específico". en StackOverFlow, y cuando el usuario hace clic en él, desaparece el valor predeterminado.

Answer 1

¿Por qué eliminar el valor? es útil, pero ¿por qué no probar CSS

input[submit] {
font-size: 0 !important;
}

El valor es importante para verificar y validar tu PHP

Answer 2

Aquí es muy simple javascript. Funciona bien para mí :

function sFocus (field) {
if(field.value == ''Enter your search'') {
field.value = '''';
}
field.className = "darkinput";
}
function sBlur (field) {
if (field.value == '''') {
field.value = ''Enter your search'';
field.className = "lightinput";
}
else {
field.className = "darkinput";
}
}

Answer 3

Aquí hay una manera fácil.

#animal representa cualquier botón del DOM.
#animal-value es la identificación de entrada que se está segmentando.

$("#animal").on(''click'', function(){
var userVal = $("#animal-value").val(); // storing that value
console.log(userVal); // logging the stored value to the console
$("#animal-value").val('''') // reseting it to empty
});

Answer 4

Aquí hay una solución jQuery. Siempre dejo que el valor predeterminado vuelva a aparecer cuando un usuario borra el campo de entrada.

<input name="Email" value="What''s your programming question ? be specific." type="text" id="Email" value="[email protected]" />
<script>
$("#Email").blur(
function (){
if ($(this).val() == "")
$(this).val($(this).prop("defaultValue"));
}
).focus(
function (){
if ($(this).val() == $(this).prop("defaultValue"))
$(this).val("");
}
);
</script>

Answer 5

Esto es algo más limpio, creo. Tenga en cuenta el uso de la propiedad "defaultValue" de la entrada:

<script>
function onBlur(el) {
if (el.value == '''') {
el.value = el.defaultValue;
}
}
function onFocus(el) {
if (el.value == el.defaultValue) {
el.value = '''';
}
}
</script>
<form>
<input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" />
</form>

Answer 6

Ingrese lo siguiente dentro del etiqueta, simplemente agrega onFocus = "value = ''''" para que tu código final se vea así:

<input type="email" id="Email" onFocus="value=''''">

Esto hace uso del titular del evento javascript onFocus ().

Answer 7

No vi respuestas realmente simples como esta, así que tal vez ayude a alguien.

var inputText = document.getElementById("inputText");
inputText.onfocus = function(){ if (inputText.value != ""){ inputText.value = "";}; }
inputText.onblur = function(){ if (inputText.value != "default value"){ inputText.value = "default value";}; }

Answer 8

Para referencia futura, tengo que incluir la forma HTML5 de hacerlo.

<input name="Email" type="text" id="Email" value="[email protected]" placeholder="What''s your programming question ? be specific." />

Si tiene un doctype HTML5 y un navegador compatible con HTML5, esto funcionará. Sin embargo, muchos navegadores actualmente no lo admiten , por lo que al menos los usuarios de Internet Explorer no podrán ver su marcador de posición. Sin embargo, consulte http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/ ( versión de archive.org ) para obtener una solución. Al usar eso, será muy moderno y compatible con los estándares, a la vez que brinda la funcionalidad a la mayoría de los usuarios.

Además, el enlace provisto es una solución bien probada y bien desarrollada, que debería funcionar de inmediato.

Answer 9

Solo use una etiqueta de placeholder en su entrada en lugar de value

Answer 10

Usando jQuery, puedes hacer:

$("input:text").each(function ()
{
// store default value
var v = this.value;
$(this).blur(function ()
{
// if input is empty, reset value to default
if (this.value.length == 0) this.value = v;
}).focus(function ()
{
// when input is focused, clear its contents
this.value = "";
});
});

Y podría incluir todo esto en un complemento personalizado, así:

jQuery.fn.hideObtrusiveText = function ()
{
return this.each(function ()
{
var v = this.value;
$(this).blur(function ()
{
if (this.value.length == 0) this.value = v;
}).focus(function ()
{
this.value = "";
});
});
};

Así es como usaría el complemento:

$("input:text").hideObtrusiveText();

Las ventajas de usar este código son:

• Es discreto y no contamina el DOM
• Reutilización de código: funciona en múltiples campos
• Calcula el valor predeterminado de las entradas por sí mismo

Enfoque no jQuery:

function hideObtrusiveText(id)
{
var e = document.getElementById(id);
var v = e.value;
e.onfocus = function ()
{
e.value = "";
};
e.onblur = function ()
{
if (e.value.length == 0) e.value = v;
};
}

Answer 11

podemos hacerlo sin usar js de la siguiente manera usando el atributo "marcador de posición" de html5 (el texto predeterminado desaparece cuando el usuario comienza a escribir, pero no solo al hacer clic)

<input type="email" id="email" placeholder="[email protected]">

vea esto: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

Answer 12

<input name="Email" type="text" id="Email" placeholder="enter your question" />

El atributo de marcador de posición especifica una breve sugerencia que describe el valor esperado de un campo de entrada (por ejemplo, un valor de muestra o una breve descripción del formato esperado).

La sugerencia corta se muestra en el campo de entrada antes de que el usuario ingrese un valor.

Nota: El atributo marcador de posición funciona con los siguientes tipos de entrada: texto, búsqueda, url, teléfono, correo electrónico y contraseña.

Creo que esto ayudará.

Answer 13

EDITAR : Aunque esta solución funciona, le recomendaría que pruebe la solución de MvanGeest a continuación, que utiliza el placeholder y un respaldo de javascript para los navegadores que aún no lo admiten.

Si está buscando un Mootools equivalente a la reserva de JQuery en la respuesta de MvanGeest, aquí hay uno .

-

Probablemente deberías usar los eventos onfocus y onblur para ayudar a los usuarios de teclado que se desplazan por los formularios.

Aquí hay un ejemplo:

<input type="text" value="[email protected]" name="Email" id="Email"
onblur="if (this.value == '''') {this.value = ''[email protected]'';}"
onfocus="if (this.value == ''[email protected]'') {this.value = '''';}" />