Entfernen/hinzufügen-Wert onfocus/onblur, wenn leer, jquery, input Feld

Ich weiß es gibt viele Fragen zu diesem Thema, aber ich weiß nicht, was Sie suchen.

Habe ich eine E-Mail-Feld, und ich will es haben "Schreiben Sie hier Ihre E-Mail" und wenn Sie auf/tun onfocus Sie sollten verschwinden. Obwohl, wenn Sie nicht etwas schreiben und gehen onblur sollte es wieder erscheinen.

InformationsquelleAutor Karem | 2011-09-11
  1. 10

    1. Markup

    <input id="email" name="email" type="text" value="Write your email here" />

    2. jQuery

    $('#email')
  .on('focus', function(){
      var $this = $(this);
      if($this.val() == 'Write your email here'){
          $this.val('');
      }
  })
  .on('blur', function(){
      var $this = $(this);
      if($this.val() == ''){
          $this.val('Write your email here');
      }
  });​

    3. Demo

    jQuery-Eingabe Platzhalter

    InformationsquelleAutor Shef
  2. 4

    Sollten Sie nutzen HTML5-Platzhalter statt, und verwenden Sie ein jquery-plugin für ältere Browser

    http://diveintohtml5.ep.io/forms.html

    Beispiel hier:

    http://jsfiddle.net/AamkB/

    Gibt es eine Menge von jquery-plugins für die Platzhalter verwendet habe ich diese:

    http://webcloud.se/code/jQuery-Placeholder/

    InformationsquelleAutor herkulano
  3. 3

    Benötigen Sie kein JS dafür. Verwenden Sie einfach placeholder="Write your email here." im <input> tag.

    Wenn Sie benötigen, um Unterstützung von IE, fügen Sie http://webcloud.se/code/jQuery-Placeholder/ zu machen, arbeiten auch dort.

    • wow, das funktioniert für alle Browser?
    • Holy molly. Dies ist ein großer Schritt vorwärts für mich O. o Welche Browser unterstützen das?
    • Es ist erwähnenswert, dass dies ist ein HTML-5-Attribut. 🙂
    • FF3.7+ Safari4.0+ Chrome4.0+ opera 11.0+ iphone4.0+. diveintohtml5.org/forms.html
    • die diveinto URL hat sich geändert (gespiegelt), um diveintohtml5.ep.io/forms.html
    InformationsquelleAutor ThiefMaster
  4. 3

    Können Sie mithilfe der inline-JavaScript-tags onblur /onfocus . Vielleicht nicht die meisten "sauberen" HTML-code, aber es sicherlich funktioniert in allen Browsern! (Nicht versuchen, IE5.5 /6.0, aber hey, wer ist mit diesen oldies heute?! ^_^)

    <input type="text" name="aSweetInputField" value="Your textfield value" 
class="anyClass"  onclick="if (this.defaultValue==this.value) this.value=''" 
onblur="if (this.value=='') this.value=this.defaultValue">

    Das ist es!

    • placeholder Attribut ist eine bessere Lösung, zusammen mit einem js-plugin für Browser, die nicht unterstützen, dieses Attribut
    • Stimmt, aber on-the-fly, das wäre eine große second-best. 🙂
    InformationsquelleAutor Jim van Aalst
  5. 0
    <input type="text" 
onfocus="if($(this).val() == 'Write your email here') $(this).val('')" onblur="if($(this).val() == '') $(this).val('Write your email here')" 
value="Write your email here">

    Dort gehen Sie.

    InformationsquelleAutor MeLight
  6. 0

    Sollte diese Arbeit für Formulare, die weltweit nur Werte festlegen, die zunächst in das input-s value Attribut.

    <input type="text" name="example" value="example text"> 
<textarea name="exampleTextArea" value="example text in textarea"> 
    var el = $('input[type=text], textarea');
    el.focus(function(e) {
        if (e.target.value == e.target.defaultValue)
            e.target.value = '';
    });
    el.blur(function(e) {
        if (e.target.value == '')
            e.target.value = e.target.defaultValue;
});
    InformationsquelleAutor Nasruddin Shaikh
Schreibe einen Kommentar