2010-11-18 11 views
1

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

Pseudo-Code:

On click #searchform 
Erase String in #searchform 
+0

Warum Sie das tun wollen? Was ist, wenn Sie etwas falsch eingegeben haben und nur bearbeiten möchten? Es scheint, dass Sie wollen, dass wenn das Textfeld den Originaltext enthält (wie: Geben Sie einen Suchbegriff ein), dann sollte es entfernt werden, wenn Sie klicken. Recht? – tbleckert

+0

@tbleckert In der Tat. Ich denke, das ist eine Standard-Usability-Sache. Also brauche ich eine bedingte Verzweigung, damit der Benutzer nicht angepisst wird. – Tomkay

+0

Warum verwenden Sie nicht das HTML-5-Platzhalter-Attribut ?! –

Antwort

4

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'); 
      } 
     }); 
    }); 
}; 
+0

Es ist schwieriger, die Validierung auf diese Weise hinzuzufügen. Stellen Sie sich vor, das Feld ist erforderlich. Dann muss der erforderliche Feldvalidierer den Anfangswert ausschließen. Stellen Sie sich auch vor, dass Sie für den Platzhalter eine andere Schriftart (oder zumindest eine andere Farbe) verwenden möchten - dann müssten Sie die Option "Klassen" wechseln. Ich denke, Platzhalterattribut ist der Weg zu gehen. –

+0

Nun ja, aber das war 2010, als Platzhalter nicht super bekannt und in den Browsern gut implementiert waren. Natürlich ist es jetzt ein anderes Mal. Aber ich sollte meine Antwort aktualisieren. – tbleckert

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

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

+1

Man sollte nie inline js verwenden ... – tbleckert

+0

Ziemlich neu auf der Scripting-Seite der Dinge, so dass alle Zeiger sehr erhalten würde, warum ich nicht sollte. Ich habe nur die Lösung geteilt, die ich in der Vergangenheit verwendet habe, um dieses Problem zu umgehen. –

+1

Vielen Dank für Ihre Unterstützung Vince. :) Ich bin sicher, das funktioniert gut, aber der Code kann in irgendeiner Weise komprimiert werden. – Tomkay

3

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(); 
+0

Die Platzhalter-Demo http://davidwalsh.name/dw-content/html5-placeholder.php funktioniert nicht in FF 3.5 - Ich möchte kein extra Plugin dafür verwenden .. nun wähle ich tbleckerts Antwort .. – Tomkay

+0

@Tomkay Jetzt ist der Platzhalter die empfohlene Vorgehensweise. Sie können feststellen, ob der Browser es mit Modernizr oder nur mit einem einfachen Javascript unterstützt, wenn. Ich denke jetzt nur IE <= 8 würde ein Polyfill verwenden. –

+0

Ja, ich denke, HTML5 ist jetzt genug beliebt, um die Aufgabe zu erledigen. Ich verwende die Browser-Validierung auch für neue Projekte. – Tomkay