it-swarm.com.de

Überprüfen Sie die HTML-Texteingabe während der Eingabe

Was ist der beste Weg, um eine HTML-Texteingabe während der Eingabe zu überprüfen? Alle Methoden, die ich kenne, haben einige Nachteile:

  1. Mit $.keypress haben Sie nur Zugriff auf den alten Wert der Eingabe, nicht auf den neuen. Einige Ereignisse (z. B. Ausschneiden/Einfügen mit der Maus) werden nicht erkannt.

  2. Die Verwendung von $.change funktioniert nur, wenn die Eingabe den Fokus verliert.

  3. Diese Frage schlägt eine Lösung vor, bei der Sie Polling verwenden, um auf Eigenschaftsänderungen zu achten. Es ist prinzipiell möglich, den neuen Wert im Callback zu überprüfen und bei ungültigem Wert auf den alten Wert zurückzusetzen. Ich bin mir nicht sicher, dass es keine Umfrage gibt, aber ich bin nicht sicher, dass es keine Rassenbedingungen gibt.

  4. Dieser Artikel empfiehlt die Verwendung von browserspezifischen Funktionen, sofern vorhanden, und auf die Abfrage zurückzugreifen, wenn keine verfügbar ist. Sieht aus wie der beste Ansatz bisher.

  5. [Update] wie in den Antworten angegeben, $.keyup gibt nach dem Update Zugriff auf den Wert. Es funktioniert jedoch nicht nur nicht beim Ausschneiden/Einfügen von Mäusen, sondern schlägt auch fehl, wenn Sie eine Taste gedrückt halten und erst loslassen, nachdem eine Menge eingegeben wurde. Wenn Sie keydown und keyup kombinieren, um den alten Wert zu speichern/wiederherzustellen, wird er abgebrochen, wenn der Benutzer zu schnell tippt.

Keine der oben genannten Lösungen ist fehlerfrei oder wirklich sicher, Cross-Browser. Gibt es bessere Lösungen, entweder gebrauchsfertig oder in Vorbereitung? Scheint ein häufiges Problem zu sein, ich habe versucht, ähnlicheFragen vor kurzem ohne Erfolg zu beantworten, und ich bin auch an einer Antwort interessiert.

(Ein gutes Argument gegen diese Praxis ist auch zu begrüßen, falls sich neue Probleme ergeben würden, wenn diese Validierung implementiert würde. Dies scheint jedoch in anderen Sprachen üblich zu sein wollen)

28
mgibsonbr

Sie können die Ereignisse input (FF) und propertychange (alle anderen) verwenden, um alle Eingabemöglichkeiten abzufangen, einschließlich der Einfügen von Tastaturen und Rmb-Ausschnitten. 

http://jsfiddle.net/dFBzW/

$('input').bind('input propertychange', function() {
    $('#output').html($(this).val());
});
48
mrtsherman

In der jQuery-Welt werden häufig Plug-Ins für diese Validierungsaufgaben verwendet. Plug-Ins können relativ einfach zu verwenden sein und ihre Popularität spiegelt normalerweise weniger Fehler wider als Code, der von Grund auf geschrieben wird.

Die Eingabevalidierung ist normalerweise in Kategorien unterteilt, darunter:

1) Korrektes Eingabeformat/Eingabemaske. Zum Beispiel nur A-Z oder 10-stellige Zahlen.

2) Inhalt in einer Domäne vorhanden. Zum Beispiel Flughafencode oder Postleitzahlen.

Für (1) können Sie diese relativ beliebten Plug-Ins verwenden:

Maskiertes Eingabe-Plugin von Digital Bush für Jquery . Es gibt viele Optionen zur Anpassung, einschließlich Leerzeichen, zB:

von der Digital Bush-Website:

$("#phone").mask("(999) 999-9999");

Das autoNumeric von decorplanit.com . Sie haben eine nette Unterstützung für Zahlen, Währung, Rundung usw.

von der autoNumeric-Website angepasst:

$('#amountPaid').autoNumeric({aSep: '.', aDec: ','}); // eg, 9.000,00

Für (2) können Sie beispielsweise Autocomplete der jQuery-Benutzeroberfläche in Kombination mit Serverressourcendaten in einem Format wie JSON verwenden. Für diese Einstellungen ist wahrscheinlich benutzerdefinierter Code erforderlich, um die Eingabe zu sperren. Sie können jedoch weiterhin Plug-Ins für die Basisfunktionalität nutzen und sich auf die spezifische Geschäftslogik konzentrieren, die Sie erstellen.

Ein Teil des obigen Textes wurde aus zwei Antworten in anderen Beiträgen angepasst: hier und hier .

5

Ein gutes Argument gegen diese Praxis ist ebenfalls zu begrüßen, falls sich neue Probleme ergeben würden, wenn diese Validierung durchgeführt würde. Dies scheint jedoch in anderen Sprachen üblich zu sein, daher bezweifle ich, dass es eine schlechte Sache ist, zu wollen.

Wenn Sie mit "validieren" "Ungültige Zeichen überhaupt nicht eingeben" möchten, denke ich, dass dies eine schlechte Praxis ist. Dies ist verwirrend für Benutzer, die möglicherweise nicht genau aufpassen und die sich während der Eingabe möglicherweise nicht einmal auf das Feld konzentrieren (z. B., wenn sie Konto- oder Telefonnummern eingeben, die sie von einem Blatt Papier lesen). Der Wert, der tatsächlich gespeichert/verwendet wird, kann sich geringfügig von dem Wert unterscheiden, von dem er dachte, dass er ihn eingegeben hatte.

Wenn Sie mit "validieren" den aktuellen Wert "prüfen" und den Benutzer auf Probleme aufmerksam machen ", indem Sie z. B. einen Fehler neben dem Feld anzeigen oder die Hintergrundfarbe ändern, ist das Verwenden einer Kombination mehrerer Ereignisse einschließlich Keyup kein Problem , ändern, verwischen, einfügen, klicken Sie auf:

$("field selector").on("keyup change blur paste cut click", function() { ... });

Die meisten normalen Fälle werden vom Benutzer erfasst, und für die Zwischenablage oder Drag'n'Drop-Fälle weiß man zumindest, dass das Feld im schlimmsten Fall noch gültig ist, wenn der Benutzer es verlässt. (Offensichtlich erlauben Sie das Senden nicht, bis alle Fehler behoben wurden.)

Wenn Sie Keyup und Keydown verarbeiten, werden Fälle behandelt, in denen der Benutzer eine Taste gedrückt gehalten hat, da die meisten Browser dafür wiederholte Keydown-Ereignisse senden.

4
nnnnnn

Nur für eine andere Lösung, um bestimmte Zeichen zu verhindern, ohne JQuery ...

<input type="text" onkeypress="checkInput(event)" />

...

function checkInput(e)
{
    //only alpha-numeric characters
    var ok = /[A-Za-z0-9]/.test(String.fromCharCode(e.charCode));
    if (!ok)
        e.preventDefault();
}

Ich weiß nicht, ob dies neue Versionen von Dingen erfordert oder nur mit einigen Browsern funktioniert. Bitte kommentieren.

2
jozxyqk

Haben Sie oninput ausprobiert?

HTML-Beispiel:

<input name="username" id="user_name" oninput="readvalue();">

javascript:

function readvalue() {
    var name = $('#user_name').val();
}
2
AhWagih

Hier ist der Code

function validatephone(xxxxx) 
{
  var maintainplus = '';
  var numval = xxxxx.value
  if ( numval.charAt(0)=='+' )
  {
    var maintainplus = '';
  }
  curphonevar = numval.replace(/[\\A-Za-z!"£$%^&\-\)\(*+_={};:'@#~,.Š\/<>\" "\?|`¬\]\[]/g,'');
  xxxxx.value = maintainplus + curphonevar;
  var maintainplus = '';
  xxxxx.focus;
}
<input type="text" align="MIDDLE" size="30" maxlength="20" onkeyup="validatephone(this);" name="contact"/>
2
Sunil Kumar B M

Dies kann auch hilfreich sein 

$(".cssclass").live("input propertychange", function () {
    //Validate goes here
});
0
Gilly