humans.txt

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.