JQuery Testo predefinito sulla casella di testo vuota

Ho una casella di testo del modulo email che mentre è vuota mi piacerebbe che avesse il valore "E-Mail" E quando si fa clic su di esso il testo scompare. Se qualcuno fa clic su di esso e non inserisce il testo. su Blur mi piacerebbe che tornasse ad avere il testo predefinito.JQuery Testo predefinito sulla casella di testo vuota

Ho provato alcune cose ma non funziona nulla. Qualcuno potrebbe per favore indirizzarmi nella giusta direzione?

fonte

2011-01-22 CongdonJL

It's pretty straightforward. Basta cancellare il valore onfocus, e quindi (se il valore è ancora vuoto) riempirlo onblur.

fonte

2011-01-22 21:12:27 sdleihssirhc

L'esempio rimuove anche il testo inserito di recente nel campo di input, che non è quello che si vorrebbe. – webtweakers

Chiama la funzione seguente e passa due argomenti: slightLabel (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')); 
      } 
     }); 

    }

fonte

2011-01-22 21:16:24 rahmanisback

È possibile utilizzare uno dei plug-in filigrana di jQuery che fanno proprio questo. Uso un plug-in per filigrana con il seguente codice

$.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();

};

richiamabile in jQuery impostando la classe della casella di testo di input per filigrana come questo

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

Il titolo è ciò che verrà visualizzato nella filigrana.

fonte

2011-01-22 21:54:20

va qualcosa come questo

$('#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'); 
    } 
});

fonte

2011-01-23 01:15:27

funziona solo con la prima riga perché è così? – DharaPPatel

Oppure si può semplicemente utilizzare l'attributo placeholder HTML5:

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

fonte

2012-03-17 16:53:30 webtweakers

Non conoscevo l'attributo segnaposto. Grande aggiunta! :) È un peccato che IE non lo supporti al momento (IE 9). –

+16

Si considera ancora IE come browser? – webtweakers

è possibile utilizzare l'attributo segnaposto e poi noi questo jquery come backup per 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')); 
     } 
    }); 
});

fonte

2012-11-28 19:56:13 vts

Utilizzare questo plug-in Jquery-placeholder

L'utilizzo di questo plug-in rende possibile utilizzare anche l'attributo segnaposto in browser non HTML5.

fonte

2013-02-15 13:23:38 Khabba

JQuery Testo predefinito sulla casella di testo vuota

risposta

Problemi correlati