Artikelformat

jQuery: Input text value change on click / ändern / ausblenden beim Klicken

Um beim Klick in ein Input Feld den value Wert verschwinden zu lassen und beim verlassen Ihn wieder anzuzeigen, vorrausgesetzt der User tippt nichts ein, kann man folgen Code verwenden:

$(document).ready(function() {
  $('.inputuser').click(function() {
    if (this.value == this.defaultValue) {
      this.value = '';
    }
  });
  $('.inputuser').blur(function() {
    if (this.value == '') {
      this.value = this.defaultValue;
    }
  });
});

jQuery Code blendet beim Klick in das Input Feld den value Wert aus und beim verlassen dessen wieder ein, solange der User nichts getippt hat.

<input type="text" class="inputuser" name="username" value="username" />

Aufruf des Input Felds mit normalen HTML. Über die Klasse wird dieses per jQuery angesprochen.

Autor: Rene Kreupl

Bloggt über WebEntwicklung und Fotografie

11 Kommentare

  1. Dann lieber gleich zum Placeholder-Attribut von HTML5 wechseln, welches in allen neueren Versionen sämtlicher Browser unterstützt wird 😉

  2. Sollte man HTML5 einsetzen, dann natürlich die neuere Variante 😉 Vor einiger Zeit habs das aber leider noch nicht…

  3. Klar HTML5 placeholder …
    und dann den M$-Browsern trotzdem wieder per jQuery auf die Sprünge helfen müßen 😉

  4. hello

    was soll denn defaultValue sein bzw. woher kommt das?
    soll das vorher zugewiesen werden?

  5. hab mal gegoogelt… ist wohl die eingangswert, der mit value=“…“ zugewiesen wird. im beispiel also „username“.
    korrekt?

  6. Ein guter Tipp, den mal als Fallback für ältere Browser benutzen kann. Würde aber prinzipiell wie auch schon meine Vorredner das HTML5 Placeholder-Attribut verwenden.
    IE8 und IE9 sind die einzigen Browser, die dieses Attribut nicht beherrschen. Dafür könnte man ja dann das Script oben verwenden.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.