it-swarm.com.de

Wie kann ich einen Textbereich scharfstellen?

Ich verwende ein einfaches Formular mit einem Textbereich. Wenn Benutzer auf den Textbereich klicken, möchte ich, dass der Inhalt des Textbereichs gelöscht wird.

Ist das möglich?

35
CLiown
$('textarea#someTextarea').focus(function() {
   $(this).val('');
});
54
Jacob Relkin

Wenn Sie nur den Standardtext löschen möchten (falls vorhanden), versuchen Sie Folgendes:

$("textarea").focus(function() {

    if( $(this).val() == "Default Text" ) {
        $(this).val("");
    }

});

Beim Testen des Standardtexts werden Sie den vom Benutzer eingegebenen Text nicht löschen, wenn er zum Textbereich zurückkehrt.

Wenn Sie den Standardtext nach dem Verlassen erneut einfügen möchten (wenn kein Text eingegeben wird), führen Sie folgende Schritte aus:

$("textarea").blur(function() {

    if( $(this).val() == "" ) {
        $(this).val("Default Text");
    }

});

Bei den obigen Beispielen wird natürlich davon ausgegangen, 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 zwar nur in leistungsfähigen Browsern unterstützt. Es hat jedoch den zusätzlichen Vorteil, dass der Platzhaltertext bei der Formularübermittlung nicht übermittelt wird.

27
kingjeffrey

Mein Vorschlag ist, dass Sie den ursprünglichen Standardinhalt nur beim ersten Fokus entfernen. Bei nachfolgenden Schwerpunkten riskieren Sie das Entfernen von Benutzerinhalten. Um dies zu erreichen, einfach .unbind () den Fokus-Handler nach dem ersten Klick:

$("textarea").focus(function(event) {

      // Erase text from inside textarea
    $(this).text("");

      // Disable text erase
    $(this).unbind(event);
});

jsFiddle-Beispiel



Da Sie eine textarea mit offenen und schließenden Tags verwenden, können Sie $(this).text(""); oder $(this).html(""); ... und, da der Text in ein textarea ist der Wert, den Sie auch verwenden können $(this).val(""); und $(this).attr("value", ""); oder sogar this.value = "";.

12
Peter Ajtai

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>
8
Sebastien

Es gibt einige Probleme, die in den aktuellen Antworten nur teilweise behandelt 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. Möglicherweise möchten Sie dem Benutzer gestatten, den Standardtext zu senden, wenn er sich dazu entschließt, ihn erneut einzugeben. Ich habe keine Ahnung, warum er dies tun möchte, aber wenn er darauf besteht, ihn wieder einzugeben, neige ich dazu, ihn zuzulassen TU es.

Im Hinblick auf diese Details füge ich dem Feld eine Klasse mit dem Namen "Platzhalter" hinzu und verwende etwa Folgendes:

$("form textarea.placeholder").focus(function(e) {
    $(this).text("");
    $(this).removeClass("placeholder");
    $(this).unbind(e);
});

Stellen Sie sicher, dass der Klassenname "placeholder" beim Senden des Formulars entfernt wurde, um zu gewährleisten, dass der Benutzer really, really einen dummen Platzhaltertext übermitteln möchte.

Wenn Sie das jQuery Validation Plugin verwenden, können Sie alles wie folgt zusammenfassen:

$.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();
    }
});
7
Wayne Burkett
jQuery(function($){
    $("textarea").focus(function(){
        $(this).val("");
    });
});
4

Etwas wie das?

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

Dies ist möglich, und ich denke, dass Sie sich für einen Code entscheiden, der dies für mehr Textbereiche als einen ...
Das verwende ich für meine Website:
Javascript:

<script type='text/javascript'>
function RemoveText(NameEle)
{
    if ($('#' + NameEle) == 'default')
    {
        $('#' + NameEle).val('');
        $('#' + NameEle).text('');
        $('#' + NameEle).html('');
    }
}
function AddText(NameEle)
{
    if ($('#' + NameEle) == '')
    {
        $('#' + NameEle).val('default');
        $('#' + NameEle).text('default');
        $('#' + NameEle).html('default');
    }
}
</script>

HTML:

<textarea cols='50' rows='3' onfocus='RemoveText(this)' onblur='AddText(this)' name='name' id='id'>default</textarea>
0
<textarea type="text" onblur="if ($(this).attr('value') == '') {$(this).val('The Default Text');}"  onfocus="if ($(this).attr('value') == 'The Default Text') {$(this).val('');}">The Default Text</textarea>
0
clickandboom

Ich habe das einfach gefunden

$('#myForm textarea').val(''); 

löscht das Formular in Chrome, aber dies funktionierte nicht für Firefox (6.x). Der Wert war in Firebug leer, der vorherige Text wurde jedoch weiterhin im Textbereich angezeigt. Um dies zu umgehen, wähle ich die Textareas einzeln aus und baue sie neu auf:

$('#' + formId + ' textarea').each(function(i){
textareaVal = $(this).parent().html();
$(this).parent().html(textareaVal);   
});

Dies beendet den Job in Firefox und unterbricht Chrome nicht. Es durchläuft nacheinander alle Textbereiche in einer Form. Funktioniert in allen anderen Browsern (Opera, Safari, sogar IE).

0
Chris Adams