Estoy haciendo un formulario sencillo y tengo este código para borrar el valor inicial:

Javascript:

function clearField(input) {
    input.value = "";
};

html:

<input name="name" id="name" type="text" value="Name" onfocus="clearField(this);"/>

Pero lo que no quiero es que si el usuario completa la entrada, pero hace clic de nuevo, se obtiene borrar. Quiero que el campo tenga el motor de arranque valor de «Nombre» sólo si la entrada está vacía. Gracias de antemano!

  • Usted está pensando en el marcador de posición de atributo.
  • Si el uso de HTML5! Pero sólo podemos esperar nuevos sitios se encuentran a la derecha? Definitivamente es importante saber que no es compatible antes de IE10. Estúpido es decir :'(
  • Um..en ese caso, tendría que usar algo como modernizr.
  • Cómo acerca de la «defaultValue’ propiedad?
InformationsquelleAutor | 2013-09-05

5 Comentarios

  1. 11

    Aquí es una solución con jQuery para los navegadores que no soportan el atributo placeholder.

    $('[placeholder]').focus(function() {
      var input = $(this);
    
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
    
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();

    Encontrar aquí:
    http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

  2. 10

    gusta

    <input name="name" id="name" type="text" value="Name" 
       onblur="fillField(this,'Name');" onfocus="clearField(this,'Name');"/>

    y js

    function fillField(input,val) {
          if(input.value == "")
             input.value=val;
    };
    
    function clearField(input,val) {
          if(input.value == val)
             input.value="";
    };

    actualización

    aquí es un demo de violín de la misma

    • Esto es perfecto para mis necesidades. ¿Cómo se podría ir sobre la compensación de otro campo en el formulario? En lugar de ‘esta’ en clearField(this,'Name'); ¿Cuál es la estructura de un documento que me permita acceder a todos los elementos del formulario por su nombre?
  3. 2

    Esto puede ser lo que usted quiere:

    Trabajo jsFiddle aquí

    • Este código coloca una cadena de texto predeterminada Enter your name here dentro de la <input> cuadro de texto, y colorea el texto a la luz gris.

    • Tan pronto como el cuadro se hace clic en el texto por defecto está desactivada y el color del texto establece en negro.

    • Si el texto se borra, la cadena de texto predeterminada es sustituido, y de color gris claro reset.


    HTML:

    <input id="fname" type="text" />

    jQuery/javascript:

    $(document).ready(function() {
    
        var curval;
        var fn = $('#fname');
        fn.val('Enter your name here').css({"color":"lightgrey"});
    
        fn.focus(function() {
            //Upon ENTERING the field
            curval = $(this).val();
            if (curval == 'Enter your name here' || curval == '') {
                $(this).val('');
                $(this).css({"color":"black"});
            }
        }); //END focus()
    
        fn.blur(function() {
            //Upon LEAVING the field
            curval = $(this).val();
            if (curval != 'Enter your name here' && curval != '') {
                $(this).css({"color":"black"});
            }else{
                fn.val('Enter your name here').css({"color":"lightgrey"});
            }
        }); //END blur()
    
    }); //END document.ready
    • jQuery puede ser un poco excesivo para este caso.. pero ya que estás haciendo, me gustaría recomendar la configuración de «Escriba su nombre aquí» a un nombre de variable – mucho más fácil de actualizar. Misma idea de los colores (placehold_text, color_placehold y color_legal o similar)
    • Buen punto de volver a la utilización de variables, Señor Crosby. Voy a dejar como está de OP para ver sus comentarios. Como jQuery, <French Accent> Nevair es jQuery también excesseeve! </French Accent> – además, OP etiquetado de ella y supongo que está bien con él. ¿Por qué utilizar javascript y escriba dos veces como mucho?
  4. 1

    HTML:

    <input name="name" id="name" type="text" value="Name" onfocus="clearField(this);" onblur="fillField(this);"/>

    JS:

    function clearField(input) {
      if(input.value=="Name") { //Only clear if value is "Name"
        input.value = "";
      }
    }
    function fillField(input) {
        if(input.value=="") {
            input.value = "Name";
        }
    }

Dejar respuesta

Please enter your comment!
Please enter your name here