JQuery Kochbuch (German Edition)

der Anwender klickt oder eine Taste drückt. Durch
setTimeout(update,0)
wird die Funktion
update
an das Ende des Call Stacks verschoben und erst ausgelöst, nachdem der Browser den Text hinzugefügt hat:
$input.bind('input keyup paste', function(){setTimeout(update,0)} );
    Was geschieht, wenn JavaScript abgeschaltet ist? Sie sollten den Bereich »Verbleibende Zeichen« standardmäßig per CSS verbergen. Mit JavaScript fügen Sie dann einem Eltern-Element einen Klassennamen hinzu, der die CSS-Regel überschreibt. Es ist zudem wichtig, die Länge der Nachricht auf dem Server zusätzlich zu kontrollieren:


...

// wenn das HTML-DOM bereit ist
$(document).ready(function(){
    $('form').addClass('jsEnabled');
});

Texteingabefelder auf bestimmte Zeichen beschränken
    Problem
    Ihre Seite für den Warenkorb besitzt Felder für die Anzahl. Bei diesen wollen Sie sicherstellen, dass die Anwender nur Zahlen eingeben können:

    Lösung
    Selektieren Sie alle Elemente mit der Klasse
onlyNumbers
und lassen sie auf die Events
keydown
und
blur
lauschen. Der Eventhandler für
keydown
verhindert, dass Anwender nicht-numerische Zeichen in das Feld eingeben. Der Eventhandler für
blur
ist eine Vorsichtsmaßnahme, durch die Daten gesäubert werden, die über das Kontextmenü per Einfügen oder über das Bearbeiten-Menü des Browsers in das Feld gelangen:
$('.onlyNumbers').bind('keydown',function(event){

    // Der Tastencode der gedrückten Taste
    var keyCode = event.which;

    // 48-57 Ziffern auf der normalen Tastatur
    var isStandard = (keyCode > 47 && keyCode < 58);

    // 96-105 Ziffern auf dem Ziffernblock
    var isExtended = (keyCode > 95 && keyCode < 106);

    // 8 Backspace, 46 Forward Delete
    // 37 Left Arrow, 38 Up Arrow, 39 Right Arrow, 40 Down Arrow
    var validKeyCodes = ',8,37,38,39,40,46,';
    var isOther = ( validKeyCodes.indexOf(',' + keyCode + ',') > −1 );

    if ( isStandard || isExtended || isOther ){
     return true;
    } else {
     return false;
    }

}).bind('blur',function(){

    // Regex, der alles findet, was keine Ziffer ist
    var pattern = new RegExp('[^0-9]+', 'g');

    var $input = $(this);
    var value = $input.val();

    // Säubern des Werts über die Regex
    value = value.replace(pattern, '');
    $input.val( value )
});
    Diskussion
    Das Event
keydown
wirkt sofort und verhindert, dass die Anwender nicht-numerische Zeichen in das Feld eingeben. Man kann auch das Event
keyup
nutzen,das dann den gleichen Handler wie das Event
blur
hätte. Allerdings könnten die Anwender dann ein nicht-numerisches Zeichen kurz aufblitzen sehen. Ich bevorzuge es, direkt die Eingabe zu verhindern und stattdessen das Aufblitzen zu vermeiden.
    Das Event
blur
schütztvor dem Einfügen nicht-numerischer Zeichen in das Textfeld. In unserem Szenario gehe ich davon aus, dass der Anwender entweder versucht, die Grenzen des JavaScript-Codes auszuloten (etwas, was ich tun würde), oder dass er versucht, die Daten aus einer Tabellenkalkulation einzufügen. In beiden Fällen muss meiner Meinung nach nicht sofort korrigierend eingegriffen werden. Wenn Ihre Situation jedoch eine instantane Korrektur erfordert, werfen Sie einen Blick auf den Abschnitt »Diskussion« des Rezepts Anzahl der verbleibenden Zeichen anzeigen , um mehr Informationen über das Abfangen von Änderungen durch ein Einfügen zu erhalten.
    Ist Ihre Situation eine andere und Sie gehen davon aus, dass Ihre Anwender Daten eher aus einer Tabellenkalkulation kopieren, dann sollten Sie daran denken, dass die Regex, die ich verwende, keine Kommas und Punkte berücksichtigt. Eine Zahl wie »1.000,00« würde dann zu »100000« werden – ebenso wie »100,000« zu »100000« würde.
    Vielleicht ist Ihnen aufgefallen, dass die Variable
validKeyCodes
ein String ist, der mit Kommas beginnt und endet. Wie in Abhängig von der Anzahl der Zeichen ins nächste Feld springen erwähnt, habe ich diese Vorgehensweise gewählt, um falsch positive Suchergebnisse zu vermeiden – suche ich nach einem
keyCode
, der von Kommas »umhüllt« ist, werden garantiert auch nur die gewünschten Zahlen gefunden.
    Was geschieht, wenn JavaScript abgeschaltet ist? Der Anwender wird beliebige Zeichen eingeben können. Überprüfen Sie daher die Daten auf dem Server immer nochmals. Verlassen Sie sich nicht auf JavaScript, um Daten sauber zu halten.

Eine Form mit Ajax