Erlauben Textfeld nur für Buchstaben mit jQuery?

Question

Ich möchte ein Textfeld machen nur Buchstaben (a-z) mit jQuery. Irgendwelche Beispiele?

Answer 1

<input name="lorem" onkeyup="this.value=this.value.replace(/[^a-z]/g,'');">

Und kann dasselbe sein für onblur für böse Benutzer, die gerne einfügen, anstatt zu tippen ;)

[+] Hübscher jQuery-Code:

<input name="lorem" class="alphaonly">
<script type="text/javascript">
$('.alphaonly').bind('keyup blur',function(){ 
    var node = $(this);
    node.val(node.val().replace(/[^a-z]/g,'') ); }
);
</script>

Answer 2

Akzeptierte Antwort

Die akzeptierte Antwort mag kurz sein, aber sie ist sehr fehlerhaft ( siehe diese Fiedel ) :

• Der Cursor bewegt sich an das Ende, unabhängig davon, welche Taste gedrückt wird.
• Nicht-Buchstaben werden kurzzeitig angezeigt und verschwinden dann.
• Es ist problematisch auf Chrome für Android (siehe meinen Kommentar).

Ein besserer Weg

Im Folgenden wird ein Array von Tastencodes (eine Whitelist) erstellt. Wenn die gedrückte Taste nicht in dem Array enthalten ist, wird die Eingabe ignoriert ( siehe diese Fiedel ) :

$(".alpha-only").on("keydown", function(event){
  // Allow controls such as backspace, tab etc.
  var arr = [8,9,16,17,20,35,36,37,38,39,40,45,46];

  // Allow letters
  for(var i = 65; i <= 90; i++){
    arr.push(i);
  }

  // Prevent default if not in array
  if(jQuery.inArray(event.which, arr) === -1){
    event.preventDefault();
  }
});

Beachten Sie, dass Groß- und Kleinbuchstaben erlaubt sind.

Ich habe Tastencodes wie Rücktaste, Löschen und Pfeiltasten hinzugefügt. Sie können Ihr eigenes Whitelist-Array erstellen aus diese Liste von Schlüsselcodes auf Ihre Bedürfnisse zugeschnitten.

Nur beim Einfügen ändern

Natürlich kann der Benutzer auch Nicht-Buchstaben einfügen (z. B. über CTRL + V oder Rechtsklick), so dass wir weiterhin alle Änderungen mit .on("input"... sondern replace() nur wenn nötig :

$(".alpha-only").on("input", function(){
  var regexp = /[^a-zA-Z]/g;
  if($(this).val().match(regexp)){
    $(this).val( $(this).val().replace(regexp,'') );
  }
});

Das bedeutet, dass der unerwünschte Effekt, dass der Cursor ans Ende springt, immer noch auftritt, aber nur, wenn der Benutzer Nicht-Buchstaben einfügt.

Vermeiden von Autokorrektur

Bestimmte Touchscreen-Tastaturen tun alles in ihrer Macht Stehende, um den Benutzer automatisch zu korrigieren, wenn sie es für nötig halten. Überraschenderweise kann dies sogar Eingaben umfassen, bei denen autocomplete et autocorrect und sogar spellcheck sind aus.

Um dies zu umgehen, würde ich empfehlen, Folgendes zu verwenden type="url" da URLs Groß- und Kleinbuchstaben akzeptieren können, aber nicht automatisch korrigiert werden. Um den Versuch des Browsers, die URL zu validieren, zu umgehen, müssen Sie dann novalidate in Ihrem form Tag.

Answer 3

Um nur Kleinbuchstaben zuzulassen, rufen Sie preventDefault auf das Ereignisobjekt, wenn der Schlüsselcode nicht im Bereich 'a' z' liegt. Prüfen Sie auch zwischen 65..90 oder 'A' Z', wenn Großbuchstaben erlaubt sein sollen.

Oder verwenden Sie alternativ eine der vielen Eingabemasken-Plugins da draußen.

Siehe Beispiel .

$(<selector>).keypress(function(e) {
    if(e.which < 97 /* a */ || e.which > 122 /* z */) {
        e.preventDefault();
    }
});

Answer 4

// allow only  Alphabets A-Z a-z _ and space
$('.alphaonly').bind('keyup blur',function(){ 
    var node = $(this);
    node.val(node.val().replace(/[^A-Za-z_\s]/,'') ); }   // (/[^a-z]/g,''
);
// allow only  Number 0 to 9
$('.numberonly').bind('keyup blur',function(){ 
    var node = $(this);
    node.val(node.val().replace(/[^0-9]/,'') ); }   // (/[^a-z]/g,''
);

Answer 5

Nachfolgend wird demonstriert, wie man mit Jquery nur Buchstaben [a-z] zulässt:

  $(function() {
    $('#txtFirstName').keydown(function(e) {
      if (e.shiftKey || e.ctrlKey || e.altKey) {
        e.preventDefault();
      } else {
        var key = e.keyCode;
        if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
          e.preventDefault();
        }
      }
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="txtFirstName" value="">