Nummern nur nach einem Alphabet zulassen?

Question

Ich muss sicherstellen, dass ein bestimmtes Feld nur Zahlen wie nach einigen standardmäßigen alphabetischen Zeichen wie XXX-XX-1234 akzeptiert. Hier sind XXX-XX- Standardzeichen, die nicht entfernt werden sollten. Nach diesen Alphabeten möchte ich, dass der Benutzer keine anderen Zeichen als Zahlen eingeben kann.

Gibt es einen guten Weg, dies zu erreichen?

Answer 1

Sie mit Eingabe RegexMuster

<input type="text" name="my_name" 
    pattern="[A-Za-z]{3}-[A-Za-z]{3}-[A-Za-z]{3}-[0-9]{4}" title="my title"> 

in Ihrem Fall auch tun (Entfernen der Zahl)

<input type="text" name="my_name" value="ABC-DE" 
    pattern="[A-Za-z]{3}-[A-Za-z]{2}-" title="my title"> 

Answer 2

Hier ist ein FIDDLE

Ich wünschte, ich könnte dies zu einem gemacht haben Kommentar zu @scaisEdge's Antwort, weil ich gerade daraus gebaut habe, um ein wenig mehr hilfreiches Zeug hinzuzufügen, aber es ist einfach zu viel, um in einen Kommentar zu passen:

HTML:

<form> 
 
    <button>submit</button> 
 
    <input type="text" name="name1" value="ABC-DE-" pattern="[A-Za-z]{3}-[A-Za-z]{2}-\d{4}$" title="LLL-LL-DDDD - L is any letter, D is any digit" /> 
 
    <input type="text" name="name2" value="XXX-XX-" pattern="XXX-XX-\d{4}$" title="XXX-XX-DDDD - D is any digit, rest as is" /> 
 
</form>

benutzte ich seine Antwort als Basis, tat dann die folgenden illustrieren mehr:

• I "\ d {4} $" hinzugefügt bis zum Ende des Regex-Musters, um 4 Zahlen zu erzwingen, dann nichts weiter
• Ich fügte eine neue Texteingabe hinzu, die zeigte, wie man explizit spezifische Zeichen für th erzwingt e alphebetic/dash Teil
• Ich habe Titel mit hilfreichen Mustern deuten, weil das in dem Pop-up angezeigt werden, wenn das Muster
abgelehnt wird
• ich es alle in einem Formular mit einem Submit-Button um zu zeigen, wie alles zusammen
arbeitet

Was sie nicht tun

ich viel Zeit damit verbracht, Code „meine eigenen rollen“ eine Version einer Texteingabe zu machen, die alle Aktionen auf sie speziell begrenzt vorne (bei der Eingabe ändern, keydown, Key-Taste, Mausklick), um nur die letzten 4 Ziffern und nichts anderes eingeben zu können. Es wurde ein Spiel von "jage the eckle cases" und ich wurde schnell davon überzeugt, dass die Verwendung eines Plugins oder einer Bibliothek, die von der Entwicklergemeinschaft gründlich geprüft wurde, der Weg für ein solches Unterfangen ist oder das Musterattribut wie oben diskutiert verwendet.

Nicht nur war es zu diesem spezifischen Muster "vertikal orientiert", ich scheiterte sogar nach viel Zeit, alle Eckkästen auszubügeln, und es blieb gebrochen.

Ich gab sogar eine Erklärung dieser Schwierigkeiten und legte den Code und meine FIDDLE in dieser Antwort, aber erkannte, dass das Hinzufügen von gebrochenem Code ist einfach keine gute Idee auf StackOverflow, also habe ich die entsprechenden Änderungen gerade gemacht, um dies zu wiederholen Erklärung und loswerden der FIDDLE und Code für die alternative Route, die ich versucht habe.