Wie kann ich ein Textfeld im Fokus löschen?

Lesezeit: 4 Minuten

Benutzer-Avatar
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?

  • 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

$('textarea#someTextarea').focus(function() {
   $(this).val('');
});

Benutzer-Avatar
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


Benutzer-Avatar
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);
});

jsFiddle-Beispiel


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>

Benutzer-Avatar
Wayne

Hier gibt es einige Probleme, die in den aktuellen Antworten nur teilweise angesprochen werden:

  1. Sie müssen den Text löschen, wenn der Benutzer das Feld fokussiert
  2. Sie möchten es nur löschen, wenn der Benutzer zum ersten Mal auf das Feld klickt
  3. Sie möchten nicht, dass der Benutzer den Standardtext senden kann, bevor er gelöscht wurde
  4. Vielleicht möchten Sie dem Benutzer erlauben, den Standardtext zu senden, wenn er sich entscheidet, ihn erneut einzugeben. Ich habe keine Ahnung, warum er das tun möchte, aber wenn er darauf besteht, ihn erneut einzugeben, dann neige ich dazu, ihn zuzulassen Tu es.

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();
    }
});

Benutzer-Avatar
Alvaro González

jQuery(function($){
    $("textarea").focus(function(){
        $(this).val("");
    });
});

Benutzer-Avatar
redwall_hp

Etwas wie das?

$('textarea#myTextarea').focus(function() {
   if ($(this).val() == 'default text') {
      $(this).val('');
   }
});

1216800cookie-checkWie kann ich ein Textfeld im Fokus löschen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy