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 = '''';}" />