JQuery: Textfeld (input) auslesen und manipulieren

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

Eine grundlegende Einführung in jQuery möchte ich nicht geben und empfehle für den Einstieg das Tutorial von Matthias Schütz.

Wer 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.

Veröffentlicht von

www.mabraham.de

Kommt noch.