JQuery Texto predeterminado en el cuadro de texto vacío

Tengo un cuadro de texto de formulario de correo electrónico que, si bien está vacío, me gustaría que tenga el valor "Correo electrónico" Y cuando hace clic en él, el texto desaparece. Si alguien hace clic en él y no ingresa texto. en Desenfoque, me gustaría que vuelva a tener el texto predeterminado.JQuery Texto predeterminado en el cuadro de texto vacío

He estado probando algunas cosas pero nada está funcionando. ¿Podría alguien señalarme en la dirección correcta?

Fuente

2011-01-22 CongdonJL

It's pretty straightforward. Simplemente borre el valor onfocus, y luego (si el valor aún está vacío) rellene onblur.

Fuente

2011-01-22 21:12:27 sdleihssirhc

El ejemplo también elimina el texto recién ingresado en el campo de entrada, que no es lo que desea. – webtweakers

Llamar a la función siguiente y pasarle dos args: etiquetaLeve (jQuery ('# email_field'), 'email');

function slightLabel(input, text) { 
     jQuery(input).val(text); 
     jQuery(input).data('defaultText', text); 
     jQuery(input).focus(function(){ 
      if(!jQuery(this).data('touched')) 
      { 
       jQuery(this).data('touched', true); 
       jQuery(input).val(''); 
      } 
     }); 

     // the part to restore the original text in 
     jQuery(input).blur(function(){ 
      if(jQuery(this).val() == '') 
      { 
       jQuery(this).val(jQuery(this).data('defaultText')); 
      } 
     }); 

    }

Fuente

2011-01-22 21:16:24 rahmanisback

Puede utilizar uno de los complementos de marca de agua de jquery que hacen precisamente eso. Uso un complemento de marca de agua que tiene el siguiente código

$.fn.watermark = function (c, t) { 
var e = function (e) { 
    var i = $(this); 
    if (!i.val()) { 
     var w = t || i.attr('title'), $c = $($("<div />").append(i.clone()).html().replace(/type=\"?password\"?/, 'type="text"')).val(w).addClass(c); 
     i.replaceWith($c); 
     $c.focus(function() { 
      $c.replaceWith(i); setTimeout(function() { i.focus(); }, 1); 
     }) 
      .change(function (e) { 
       i.val($c.val()); $c.val(w); i.val() && $c.replaceWith(i); 
      }) 
      .closest('form').submit(function() { 
       $c.replaceWith(i); 
      }); 
    } 
}; 
return $(this).live('blur change', e).change();

};

rescatable en jQuery mediante el establecimiento de la clase del cuadro de texto de entrada en Watermark como esto

<input type="text" id="keyword" name="keyword" class="watermark" style="width: 250px" 
    title="Type keyword here" />

El título es lo que se mostrará en la marca de agua.

Fuente

2011-01-22 21:54:20

que es algo como esto

$('#yourElement').focus(function(){ 
    //Check val for email 
    if($(this).val() == 'E-Mail'){ 
     $(this).val(''); 
    } 
}).blur(function(){ 
    //check for empty input 
    if($(this).val() == ''){ 
     $(this).val('E-Mail'); 
    } 
});

Fuente

2011-01-23 01:15:27

esto funciona solo con la primera fila ¿por qué es así? – DharaPPatel

O usted podría utilizar el atributo marcador de posición HTML 5:

<input type="text" id="keyword" name="keyword" placeholder="Type keyword here" />

Fuente

2012-03-17 16:53:30 webtweakers

No sabía sobre el atributo marcador de posición. ¡Gran adición! :) Es una pena que IE no lo admita en este momento (IE 9). –

+16

¿Todavía se considera que IE es un navegador web? – webtweakers

puede utilizar el atributo marcador de posición y luego nosotros este jQuery como copia de seguridad para IE

<input type="text" id="keyword" name="keyword" placeholder="The watermark" value='The watermark' class="watermark"/> 

$(document).ready(function() { 
    $('.watermark').focus(function() { 
     if ($(this).val() == $(this).attr('placeholder')) { 
      $(this).val(''); 
     } 
    }).blur(function() { 
     if ($(this).val() == '') { 
      $(this).val($(this).attr('placeholder')); 
     } 
    }); 
});

Fuente

2012-11-28 19:56:13 vts

Utilice este Jquery-placeholder plugin

Al usar este complemento, también es posible utilizar el atributo marcador de posición en navegadores que no admiten HTML5.

Fuente

2013-02-15 13:23:38 Khabba

JQuery Texto predeterminado en el cuadro de texto vacío

Respuesta

Cuestiones relacionadas