Ich verwende ein einfaches Formular mit einem Textbereich. Wenn der Benutzer auf den Textbereich klickt, möchte ich, dass der Inhalt des Textbereichs gelöscht wird.
Ist das möglich?
CLiown
Ich verwende ein einfaches Formular mit einem Textbereich. Wenn der Benutzer auf den Textbereich klickt, möchte ich, dass der Inhalt des Textbereichs gelöscht wird.
Ist das möglich?
$('textarea#someTextarea').focus(function() {
$(this).val('');
});
König Jeffrey
Wenn Sie nur den Standardtext löschen möchten (falls vorhanden), versuchen Sie Folgendes:
$("textarea").focus(function() {
if( $(this).val() == "Default Text" ) {
$(this).val("");
}
});
Indem Sie den Standardtext testen, löschen Sie den vom Benutzer eingegebenen Text nicht, wenn er zum Textbereich zurückkehrt.
Wenn Sie den Standardtext wieder einfügen möchten, nachdem sie gegangen sind (wenn sie keinen Text eingegeben haben), gehen Sie wie folgt vor:
$("textarea").blur(function() {
if( $(this).val() == "" ) {
$(this).val("Default Text");
}
});
Die obigen Beispiele gehen natürlich davon aus, dass Sie mit dem folgenden Markup beginnen:
<textarea>Default Text</textarea>
Wenn Sie Platzhaltertext semantisch verwenden möchten, können Sie die neue HTML5-Eigenschaft verwenden:
<textarea placeholder="Default Text"></textarea>
Dies wird jedoch nur in fähigen Browsern unterstützt. Aber es hat den zusätzlichen Vorteil, dass der Platzhaltertext beim Senden des Formulars nicht gesendet wird.
text()
funktioniert nicht wie erwartet, verwenden val()
stattdessen (die Beispiele hier funktionieren nicht mit text()
aber sie tun mit val()
– Spuas
9. Februar 2012 um 10:47 Uhr
Danke spaus. Ich habe die Antwort aktualisiert, um mit neueren Versionen von jQuery zu arbeiten (gemäß Ihrem Vorschlag).
– König Jeffrey
3. März 2012 um 4:22 Uhr
Für Leute wie mich, die zu schnell gefahren sind, muss das zweite Snippet sein hinzugefügt gleich nach dem ersten. Der erste ist der ‘Fokus’-Teil, der zweite der ‘Unschärfe’-Teil 🙂
– Erdnüsse
8. November 2012 um 18:41 Uhr
Ich bin ganz dafür, Standardtext zu löschen, aber aus irgendeinem Grund funktionieren die Zeichenfolgenvergleicher in dieser und der “besten Antwort” bei mir nicht. Die Standardzeichenfolge entspricht aus irgendeinem Grund nicht wirklich $(this).val(). Wenn Ihnen das passiert, versuchen Sie stattdessen Folgendes: if($('#textbody').val().indexOf("This is default text.") > -1){ $(this).val(''); }
– TARKUS
23. April 2014 um 18:56 Uhr
Peter Aytai
Mein Vorschlag ist, dass Sie nur den anfänglichen Standardinhalt im ersten Fokus entfernen. Bei nachfolgenden Schwerpunkten riskieren Sie das Entfernen von Benutzerinhalten. Um dies zu erreichen, einfach .lösen() der Focus-Handler nach dem ersten Klick:
$("textarea").focus(function(event) {
// Erase text from inside textarea
$(this).text("");
// Disable text erase
$(this).unbind(event);
});
Als Hinweis, da Sie a verwenden textarea
die offene und schließende Tags hat, können Sie verwenden $(this).text("");
oder $(this).html("");
… und da der Text in a textarea
ist sein Wert, den Sie auch verwenden können $(this).val("");
und $(this).attr("value", "");
oder auch this.value = "";
.
Ich denke, das ist eine eher angemessene Lösung als die akzeptierte. Vielen Dank
– Eyad Fallatah
8. Dezember 2011 um 2:04 Uhr
HTML5 bietet eine elegantere Lösung für dieses Problem: das Attribut „Platzhalter“.
Es erstellt einen Text im Hintergrund Ihres Textbereichs, der nur angezeigt wird, wenn der Textbereich leer ist.
<textarea placeholder="Enter some text !"></textarea>
Wayne
Hier gibt es einige Probleme, die in den aktuellen Antworten nur teilweise angesprochen werden:
In Anbetracht dieser Details würde ich dem Feld eine Klasse namens “placeholder” hinzufügen und etwa Folgendes verwenden:
$("form textarea.placeholder").focus(function(e) {
$(this).text("");
$(this).removeClass("placeholder");
$(this).unbind(e);
});
Bestätigen Sie, dass der „Platzhalter“-Klassenname entfernt wurde, als das Formular gesendet wurde, um sicherzustellen, dass der Benutzer Ja wirklich, Ja wirklich möchte einen blöden Platzhaltertext einreichen.
Wenn Sie die verwenden jQuery-Validierungs-Plugindann kannst du das ganze so zusammensetzen:
$.validator.addMethod("isCustom", function(value, element) {
return !$(element).hasClass("placeholder");
});
$(form).validate({
rules: {
message: {
required: true,
isCustom: true
}
},
messages: {
message: "Message required, fool!"
},
submitHandler: function(form) {
$(form).find(":submit").attr("disabled", "disabled");
form.submit();
}
});
Alvaro González
jQuery(function($){
$("textarea").focus(function(){
$(this).val("");
});
});
redwall_hp
Etwas wie das?
$('textarea#myTextarea').focus(function() {
if ($(this).val() == 'default text') {
$(this).val('');
}
});
Sind Sie sicher, dass Sie nicht nur den Standardtext entfernen möchten? Meiner Erfahrung nach können solche Verhaltensweisen sehr aufdringlich sein …
– torkindr
16. September 2010 um 19:02 Uhr
Es gibt eine Reihe von Usability-Nachteilen bei der Verwendung des Werts für Hilfetexte: Der Benutzer könnte ihn versehentlich senden, der Browser könnte ihn überschreiben, der Benutzer könnte mit der Eingabe beginnen, bevor Ihr Skript ausgeführt wurde usw. Der richtige Weg ist die Positionierung einer Beschriftung über der Eingabe Feld, was etwas komplizierter ist, als nur den Wert zu setzen, aber zum Glück gibt es eine Reihe von Plugins (z beschriften), die den schwierigen Teil für Sie erledigen.
– Tgr
16. September 2010 um 23:19 Uhr