Schild im Eingang mit Hilfe von jquery

mein "label" ist im Eingang, so dass ich möchten, leeren Sie das Feld, wenn die Benutzer klicken Sie auf und wenn Sie leer ist das "label" ist wieder zurück 

     $('#name').focus(function() {
        if ($(this).val()=="Your name") { $(this).val(""); }
    }).blur(function() {
        if ($(this).val()=="") { $(this).val("Your name") }
    });

wäre und das getan, um 3 oder mehr Felder, es gibt keinen besseren aprouch? ohne plugins, nur jquery

  • Sie müssen auch berücksichtigen, was passiert, wenn Sie lassen Sie das Feld leer und senden Sie das Formular.
  • seine eine ajax-Antwort, die ich tun, php Validierung nur in diesem Fall
  • stackoverflow.com/questions/5120257/...
InformationsquelleAutor braindamage | 2011-03-03
  1. 2

    Wenn Sie möchten, um es mit den anderen Bereichen leicht könnten Sie das Häkchen entfernen und legen Sie die Your name Wert auf das title-Attribut des Feldes.

    $('.waterMarkInput').focus(function() {
  if ($(this).val()==$(this).attr("title")) { $(this).val(""); }
}).blur(function() {
  if ($(this).val()=="") { $(this).val($(this).attr("title")); }
});

    Werden und dann die input-Felder könnte so Aussehen:

    <input type="text" value="" class="waterMarkInput" title="Your name"/>
    • danke! eine kleine Korrektur: if ($(this).val()=="") { $(diese).val($(this).attr("title")); }
    • Hoppla, Feste. :)
    • Angefangen habe ich mit diesem Skript und Addierte die Fähigkeit, verwenden Sie einfach den aktuellen Wert des Feldes, so gibt es keine Notwendigkeit, haben ein title-Attribut. Auch Hinzugefügt die notwendigen latente executiion. <pre> $(document).ready(function(){ $('.inlineLabel').focus(function() { if ($(this).attr("initial") == undefined) { $(this).attr("initial",$(this).val()); } if ($(this).val() == $(this).attr("initial")) { $(this).val(""); } }).blur(function() { if ($(this).val() == "") { $(diese).val($(this).attr("initial")); } }); }); </pre>
    InformationsquelleAutor Mark Coleman
  2. 6

    Ich denke, deine Methode ist wahrscheinlich fast so präzise wie es geht zu bekommen, aber es ist erwähnenswert, dass html5 bietet die Platzhalter Attribut input tags:

    <input type="text" placeholder="Your name." />

    JS Fiddle demo.

    Dies ist, natürlich, noch seinen Weg durch die nicht-modernen Browser...

    InformationsquelleAutor David Thomas
Schreibe einen Kommentar