Beschränken Sie eine HTML-Eingabe auf Ziffern nur mit maxlength 5 (ignorieren Sie andere Zeichen)

Question

Ich habe viele ähnliche Fragen gelesen, konnte aber keine finden, die für diese 2 Bedingungen funktioniert (nur Ziffern eingegeben mit maximaler Länge von 5). Ich habe verschiedene Varianten ausprobiert, ist einer von ihnen:

<div class="input text"> 
    <input id="zip" name="zip" type="number" min="0" max="99999" ng-model="formData.zip" placeholder="Type here..." class="input-medium" ng-init="0"> 

Für diesen Ich bin noch in der Lage, so viele Ziffern eingeben, wie ich will, so dass der min max Attribute tun nicht wirklich etwas.

Answer 1

Ein aggressiver Ansatz, der das Ereignis KeyDown und blockiert alle unerwünschte Eingabe über prevent verwendet:

Edit: Ich habe auch eine Version enthalten, die zum Kopieren/Einfügen für den Vergleich ermöglicht, aber in diesem Fall Sie n Verwenden Sie keyup, um das Einfügen zu ermöglichen, bevor Sie den eingefügten Inhalt reparieren.

Für alle anderen Schlüssel oder Tastenkombinationen, die Sie zulassen möchten, können Sie sie einfach zur ersten if-Anweisung als zulässige Eingabe hinzufügen.

///////////////////////////////////////////////////// 
 
// Super strict version only allows numbers as input 
 
///////////////////////////////////////////////////// 
 
var input = document.getElementById('num'); 
 

 
input.addEventListener('keydown', function(event) { 
 
    // always allow backspace, delete, left/right arrow keys 
 
    if (event.which == 8 || event.which == 46 || event.which == 37 || event.which == 39) { 
 
    return; 
 
    } 
 
    // prevent all other input if already at 5 chars or not a number 
 
    else if (input.value.length >= 5 || event.which < 48 || event.which > 57) { 
 
    event.preventDefault(); 
 
    return; 
 
    } 
 
}); 
 

 
///////////////////////////////////////////////////// 
 
// Version that allows for copy/pasting 
 
///////////////////////////////////////////////////// 
 
var inputPaste = document.getElementById('paste-num'); 
 

 
inputPaste.addEventListener('keydown', function(event) { 
 
    // always allow backspace, delete, left/right arrow, copy, paste, select all 
 
    if (event.which == 8 || event.which == 46 || event.which == 37 || event.which == 39 || (event.ctrlKey && event.which == 67) || (event.ctrlKey && event.which == 86) || (event.ctrlKey && event.which == 65)) { 
 
    return; 
 
    } 
 
    // prevent all other input if already at 5 chars or not a number 
 
    else if (inputPaste.value.length >= 5 || event.which < 48 || event.which > 57) { 
 
    event.preventDefault(); 
 
    return; 
 
    } 
 
}); 
 

 
// clean anything that gets pasted in 
 
inputPaste.addEventListener('keyup', function(event) { 
 
    if (event.ctrlKey && event.which == 86) { 
 
    // remove non numbers 
 
    inputPaste.value = inputPaste.value.replace(/[^0-9]/g, ""); 
 
    // trim to first 5 digits 
 
    inputPaste.value = inputPaste.value.substr(0, 5); 
 
    } 
 
});

Numbers Only: <input id="num" name="num" placeholder="#####"> <br> 
 
Numbers Only(can copy/paste):<input id="paste-num" name="paste-num" placeholder="#####">

Answer 2

Hier ist ein Weg, es zu tun. Unter keyup überprüft der Handler den Eingabewert; Wenn es mehr als fünf Zeichen gibt, kann der Benutzer keine weiteren hinzufügen. Wenn ein nicht numerisches Zeichen eingegeben wird, entfernt die Funktion es.

UPDATE: Dieser Code kann jetzt Zahlen am Anfang oder in der Mitte des Pakets einfügen, wenn fünf Zeichen bereits vorhanden sind.

var inputEl = document.getElementById('zip'); 
 
var prev = ""; 
 

 
inputEl.addEventListener('keyup', function(e) { 
 
    if (e.which == 8) { // if backspace 
 
    prev = inputEl.value; 
 
    return; 
 
    } 
 
    // check for >5 characters 
 
    if (inputEl.value.length > 5) { 
 
    if (e.which < 48 || e.which > 57) { // if new char is a number 
 
     inputEl.value = prev; 
 
    } else { 
 
     inputEl.value = inputEl.value.slice(0, inputEl.value.length - 1); 
 
    } 
 
    if (inputEl.value.length > 5) { // if still >5 after parsing 
 
     inputEl.value = inputEl.value.slice(0, 5); 
 
    } 
 
    } 
 
    // check for a digit (code 48 to 57) 
 
    else if (e.which < 48 || e.which > 57) { 
 
    (inputEl.value.length > 1) ? inputEl.value = prev: inputEl.value = ""; 
 
    } 
 
    prev = inputEl.value; 
 
}); 
 

 
inputEl.focus();

<div class="input text"> 
 
    <input id="zip" name="zip" placeholder="Type here..."> 
 
</div>

(Fokus wurde für eine einfache Prüfung auf das Eingabefeld eingefügt.)