jQuery: textarea Standardwert disppear auf klicken Sie auf

Ich möchte eine textarea mit einigen Standard-text. Wenn der Benutzer klickt in das Textfeld
sollte der Standardtext gelöscht werden. Wie kann ich den Wert der textarea verschwinden auf Klick?

Ich will es genau so, http://www.webune.com/forums/20101025cgtc.html

Aber ich wollen, die es im jQuery.

<textarea id="textarea">This should be removed..</textarea>

Wenn es funktioniert in plain JavaScript, warum erschweren Sie es mit jQuery?
Ich möchte den text "dies sollte entfernt werden.." nicht in eine javascript-variable aber in der html -, und bevorzuge ich jquery besser

InformationsquelleAutor Karem | 2011-02-20

31

Ich benutze dies als ein bisschen mehr generisch - es löscht das element mit dem Wert im Fokus, sondern das element zurückgegeben, die den Wert auf den Standardwert wenn Sie leer sind.
```
$("#textarea")
  .focus(function() {
        if (this.value === this.defaultValue) {
            this.value = '';
        }
  })
  .blur(function() {
        if (this.value === '') {
            this.value = this.defaultValue;
        }
});
```
- +1 Das ist die beste Antwort.
- html5 hat jetzt das Platzhalter-Attribut. developer.mozilla.org/en/HTML/Element/textarea
InformationsquelleAutor ScottE
6

Erreichen Sie dies auch ohne JavaScript durch die Verwendung Platzhalter - Attribut.

Aber Sie sollten sich bewusst sein, dass nicht jeder browser unterstützt es noch nicht. In diesem Fall können Sie zum Beispiel mit diesem plugin: http://plugins.jquery.com/project/input-placeholder

InformationsquelleAutor Igor Pavelek

Sollte dies funktionieren:

$('#txt')
    .focusin(function() {
        if ( this.value == 'Write something...' ) {
            this.value = '';    
        }
    })
    .focusout(function() {
        if ( this.value == '' ) {
            this.value = 'Write something...';    
        }
});

Live-demo: http://jsfiddle.net/g7UKN/1/

Update:

Dies sollte es tun:

$('#txt')
    .each(function() {
        $(this).data('default', this.value);
    })
    .focusin(function() {
        if ( this.value == $(this).data('default') ) {
            this.value = '';    
        }
    })
    .focusout(function() {
        if ( this.value == '' ) {
            this.value = $(this).data('default');    
        }
});

Live-demo: http://jsfiddle.net/g7UKN/2/

dies funktioniert, wie ich möchte, obwohl eine Sache, die bleibt, sollte geprüft werden, ob der default-Wert für "etwas Schreiben...", so dass, wenn ich tun: <textarea>BLABLA</textarea> dann sollte geprüft werden, ob "BLABLA" und nicht "etwas schreiben..."
Ich aktualisiert meine Antwort.
Wählen Sie Scotts Antwort. Er verwendet die defaultValue - Eigenschaft speichert den Initialen Wert des TEXAREA-element. Also data('default') ist nicht erforderlich.

InformationsquelleAutor Šime Vidas

Sehr einfache, nicht-jQuery-abhängige Lösung:

<textarea onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">Hello World</textarea>

InformationsquelleAutor Jake Wilson

2
```
$('#textarea').click(function(){
     if($(this).val() == "This should be removed.."){
          $(this).val() = "";
     }
});
```
//edit
```
var defaultTextAreaValue = "This should be removed..";
$('#textarea').focus(function(){
     if($(this).val() == defaultTextAreaValue){
         $(this).val("");
     }
});
$('#textarea').blur(function(){
      if($(this).val() == "" || $(this).val() == defaultTextAreaValue){
          $(this).val(defaultTextAreaValue);
      }
});
```
- Sollten Sie verwenden .blur und .focus wie kann man betreten und verlassen der textarea mit tabs. Auch $(this).val() = ""; sollte $(this).val("");
- Ihr Recht, ich habe gerade getestet, meine eigenen Vorschlag und wunderte sich, warum es nicht funktioniert 🙂
- Ich möchte die textarea-Komponente, um zu zeigen "Dies sollte entfernt werden.." auf blur wieder, wenn nichts eingegeben wurde. Genauso wie beispielsweise. Auch das "Dies sollte entfernt werden.." sollte geprüft werden, ob im Vorgabe-Wert(wie in meinem Fall wird der default-Wert der txtarea nicht das gleiche)
InformationsquelleAutor Voooza
1

Versuchen Sie einfach das unten snippet. Erste mal, wenn Sie klicken Sie auf das Textfeld leert den Inhalt.
```
$('#textarea').focus(function(){
 $(this).empty();
});
```
- Es wäre eine Schande, füllen Sie eine textarea mit einem Haufen text, dann konzentrieren Sie einem anderen element, dann kommen Sie wieder und wieder konzentrieren sich die textarea nur um zu sehen, alle Ihre eingegebenen text verschwinden 🙁
- Stimmen. Ich habe dies geschrieben, fast 5 Jahre zurück 🙂
InformationsquelleAutor AK M
0

Benötigen Sie zwei Prozeduren, eine für, wenn das element den Fokus erhält und man, wenn es verliert. Wenn es den Fokus erhält, überprüfen Sie, ob der Wert nur Leerzeichen und, falls ja, setzen Sie den Wert auf die Standardeinstellung.
```
$('#textarea').focus( function(){
        var $this =$(this);
        if($this.val() == 'This should be removed..'){
             $this.val('');
        }
}).blur(function() {
        var $this = $(this);
        if ($this.val().match(/^\s*$/) { //matches only spaces or nothing
             $this.val('This should be removed..');
        }
});
```
- wie gesagt zu den anderen, die "Diese sollte entfernt werden.." sollte in der <textarea>Dieser sollte entfernt werden..</textarea> so, dass es prüft, ob der Standardwert in der textarea
InformationsquelleAutor tvanfosson

Und wenn jemand will, um diesen trick zu tun, die auf eine ajax geladen Texteingabefelder können Sie erreichen dies mit der .live() event 😉

$('#textarea').live('focusin',function () {
        if (this.value === 'leDefault ...') {
            this.value = '';
        }
    });
    $('.larger').live('focusout',function () {
        if (this.value === '') {
            this.value = 'leDefault';
        }
    });

InformationsquelleAutor Mihai Tudor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.