JQuery Empty A Textfield Wenn ich darauf klicke

Question

Wie lege ich ein Textfeld (HTML-Formular) ab, wenn ich darauf klicke, um etwas zu schreiben.

Pseudo-Code:

On click #searchform 
Erase String in #searchform 

Answer 1

Try it here

$('#searchform').click(function() { 
    if ($(this).val() == 'Enter search term') { 
     $(this).data('original', $(this).val()).val(''); 
    } 
}); 

$('#searchform').blur(function() { 
    if ($(this).val() == '') { 
     $(this).val($(this).data('original')); 
    } 
}); 

EDIT Ab jetzt sollten Sie das placeholder Attribut verwenden und wenn Sie möchten, verwenden Sie die oben als polyfill für fehlende Platzhalter-Unterstützung.

if (!('placeholder' in document.createElement('input'))){ 
    $('input[placeholder]').each(function() { 
     $(this).placeholder(); 
    }); 
} 

Und verwandeln Sie den ursprünglichen Code in ein Plugin für die einfache Verwendung (mit einigen kleinen Mods).

jQuery.fn.placeholder = function() { 
    return this.each(function() { 
     var value = $(this).attr('placeholder'); 
     jQuery(this).val(value).addClass('placeholder'); 
     jQuery(this).focus(function() { 
      if (jQuery(this).val() == value) { 
       jQuery(this).val('').removeClass('placeholder'); 
      } 
     }); 

     jQuery(this).blur(function() { 
      if (jQuery(this).val() == '') { 
       jQuery(this).val(value).addClass('placeholder'); 
      } 
     }); 
    }); 
}; 

Answer 2

$('#searchform').click(function() { $(this).val('') }) 

Answer 3

Wenn Sie wollen, einen Standardwert von einem Feld zu löschen, wie „Enter Suchbegriff“ ich den folgenden Code verwenden:

function clearText(thefield){ 
if (thefield.defaultValue==thefield.value) 
thefield.value = "" 
} 

und dann auf meinem Eingabefeld füge ich hinzu:

<input type="text" name="username" value="enter your name here" onfocus="clearText(this)"> 

:

onfocus="clearText(this)" 

So wäre es

Answer 4

Ich würde Ihnen die Verwendung des HTML5-Platzhalterattributs empfehlen. Zum Beispiel:

<input type="text" placeholder="some default string if empty" /> 

Dies funktioniert mit den meisten der neuesten Browser und für ältere gibt es ein Workaround jQuery Plugin. Hier ist der Link zur placeholder plugin.

Und dann rufen Sie einfach:

$('input[placeholder]').placeholder();