jQuery: Textfeld(input) auslesen und manipulieren
Schlüsselworte
Textfeld auslesen & manipulieren
Mit folgenden Codefragment kann man den Wert(value) eines Input-Feldes auslesen.
/**via testbutton Wert von MyTestinput anzeigen */ $('#testbutton').click(function() { alert($('#MyTestinput').val()); });
Hier wird via id auf den Wert (value) zugegriffen. Mehr zu val() finden sich wie gewohnt auf der Entwicklerseite von jQuery()
Zum Testen nehmen wir folgendes Inputfeld:
Wert(value) eines Textfeldes setzen
Mif folgenden Codeschnipsel kann man den Wert(value) eines Textfeldes setzen.
$('#Testbutton').click(function() { $('#input').val('Mein gesetzter Wert'); });
Wert eines Textfeldes makieren
Oft kommt es vor, dass man den aktuellen Text in einen Input-Feld markieren möchte, zum Beispiel um diesen
schnell zu überschreiben.
$('#MyTestinput2').focus(function() { setTimeout(function(){$('#MyTestinput2').select();}, 10); });
Sobald unser Textfeld den Fokus erhält(siehe hierzu auch focus()), wird der Wert markiert.
Auto-Tabbing
Wir kennen Auto-Tabbing von vielen Desktopanwendungen, beispielsweise bei Installation eines Programmes bei der Eingabe
der Seriennummer. Sobald die maximale Länge an Zeichen eingeben wurde, springt der Fokus zum nächsten Feld.
Wir realisieren diese Funktion mit jQuery.
Zum Testen benötigen wir zwei Textfelder (diese Anzahl ist willkürlich :)).
max. Zeichen hier 5
$(document).ready(function() { var iLength = 5; $('#tb1').keyup(function() { if ($(this).val().length == iLength) { $('#tb2').focus().select(); } }); }); /** * das ganze variabler als einfache Funktion */ function AutoTabbing(sInput1, sInput2, iMax) { sInput.keyup(function() { if(Input1.val().length == iMax) { Input2.focus().select(); } }); } $(document).ready(function() { var Input1 = $('#MyInput1'); var Input2 = $('#MyInput2'); var iMax = 5; AutoTabbing(Input1, Input2, iMax); });
Zum Demostrationszwecken habe ich noch die Function css() angefügt. Auch ein Beispiel, wie leicht sich mit jquery() Funktionen aneinander fügen lassen.
var iLength = 5; $('#tb1').keyup(function() { if ($(this).val().length == iLength) { $('#tb2').focus().select().css('border', '1px solid red'); //.css('border', '1px solid red') } });
Textfeld wählen durch Type
Textfelder (Input) lassen sich auch über den Type ansprechen. Zum Beispiel so:
$(document).ready(function() { $("input[type=text]")... });
Fazit
Mit jQuery() lassen sich schnell Ergebnisse
erzielen.
Die Filtermöglichkeiten finden sich
hier reinblicken lohnt sich.