Donnerstag, Juni 4, 2020

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

6 Kommentare

  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

  2. 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
  3. 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. 🙂
  4. 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.

  5. 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;
    });

Kostenlose Online-Tests