JQuery: Textfeld (input) auslesen und manipulieren

Die jQuery-Serie wurde 2010 verfasst. Inzwischen ist die Bibliothek jQuery obsolet, da aktuelle Browser DOM-Standards erfüllen. Die Empfehlung ist klar in neuen Projekten auf Vanilla-Javascript oder aktuelle Frontend-Frameworks zu setzen, statt auf jQuery. Diese Artikel bleiben als Hilfestellung für bestehende Legacy-Anwendungen erhalten.

Im dritten Artikel der Serien Formular-Felder auslesen und manipulieren mit JQuery beschäftige ich mich mit Textfeldern (input) und stelle im Folgenden Lösungen für häufige Probleme mittels jQuery vor.

So wird gezeigt, wie man mit jQuery

• den Wert (value) eines Input Text ausliest,
• den Wert (value) eines Input Text setzt,
• den Wert (value) eines Input Text markiert,
• den Wert (value) eines Input Text vorbelegt und
• Auto-Tabbing mit Input Text realisiert.

Wer grundlegend und tiefer in JQuery einsteigen möchte und ein gutes deutschsprachiges Buch sucht, dem empfehle ich jQuery: Das Praxisbuch (Galileo Computing)

Dieser Artikel ist Teil der Serie Formular-Felder auslesen und manipulieren mit JQuery.

Wert (value) eines Input Text auslesen

Mit folgendem jQuery-Code-Fragment kann man den Wert (value) eines Input-Felds auslesen.

$('#input-auslesen').click(function(){
alert($("#input1").val());
});

Mittels des jQuery $-Selektors $("#input1") wird das Input-Feld mit der Id input1 ausgewählt und anschließend dessen Wert über die jQuery-Funktion val() ausgelesen.

Wert (value) eines Input Text setzen

Mit folgendem jQuery-Code-Fragment kann man den Wert (value) eines Input-Felds setzen.

$("#input-setzen").click(function(){
$("#input1").val("Gesetzter Wert");
});

Es wird wie oben verfahren. Abweichend wird der jQuery-Funktion val() ein Wert übergeben und dadurch der Wert des Input-Felds auf diesen Wert gesetzt.

Wert (value) eines Input Text markieren

Häufig möchte man den aktuellen Text eines Input-Felds markieren, beispielsweise zum schnelleren Überschreiben.

$("#input-markieren").focus(function(){
var that = this;
setTimeout(function(){$(that).select();},10);
});

Mittels $("#input-markieren").focus(function(){}) wird dem Input Feld mit der Id input-markieren mit Code verknüpft, der ausgeführt wird, sobald das Feld den Fokus erhält. Über $(this).select() wird der Text des Input Felds markiert (select). Der restliche Code reduziert Probleme mit manchen Browsern, in denen der Text beim Wechseln des Fokus per Klick sonst nicht zuverlässig markiert wird.

Vorbelegung von Input Text

Die Vorbelegung von Input Feldern mit Standard-Werten ist weit verbreitet.

var defaultText = null;
$("#input-vorbelegt").blur(function(){
if($(this).val()==""){
$(this).val(defaultText);
}
});
$("#input-vorbelegt").focus(function(){
if(defaultText === null){
defaultText = $(this).val();
}
if($(this).val() == defaultText){
$(this).val("");
}
});

Dem Input Feld mit der Id input-vorbelegt wird mit mittels der jQuery-Funktionen focus() und blur() mit Code verknüpft. Der Code, der in focus() übergeben wird, liest zum einen beim erstmaligen Aufruf mittels defaultText = $(this).val(); die Vorbelegung aus dem Input Feld und speichert diese zur späteren Verwendung in einer Variable. Anschließend wird der Wert des Input Felds auf den leeren String gesetzt. Der Code, der in blur() übergeben wird, wird ausgeführt, sobald das Input Feld des Fokus abgibt. Er setzt den Wert des Input Felds, falls dieses leer ist, auf den zuvor in defaultText abgelegten Wert zurück.

Auto-Tabbing mit Input Text

Auto-Tabbing kennt man u.a. von der Eingabe von Seriennummern bei der Installation von Software. Sobald der Wert eines Textfelds die maximale Länge erreicht hat, wird der Fokus auf das nächste Feld gesetzt. Das folgende Code-Fragment realisiert Auto-Tabbing mit jQuery.

var text1Length = 5;
$("#input-tab1").keyup(function(){
if($(this).val().length == text1Length){
$("#input-tab2").focus().select();
}
});
$("#input-tab2").keyup(function(e) {
// console.log(e.which); // del = 8
if(e.which == 8 && $("#textTab2").val().length == 0){
$("#input-tab1").focus().select();
return false;
}
return true;
});

Zum Abschluss verweise ich auf die lauffähige Demo der vorgestellten Möglichkeiten.