2017-02-10 4 views
1

Ich brauche eine Eingabe von Text-Box, die nur Folge von 0 und 1 ist wie 00101110101.HTML Input Box mit bestimmten Nummern nur

<input type="number"></input> schränken alle Buchstaben jedoch eingegeben werden kann annehmen, können wir Eingang 1,2, 3,4 und so weiter. Ich muss Eingabestring beschränken, um nur 0 und 1 zu bestehen.

Jede Möglichkeit in HTML oder mit Javascript-Hilfe zu tun?

+0

'pattern = [01]' Wenn die Nachprüfung akzeptabel ist. Ein Beispiel finden Sie hier: http://www.w3schools.com/tags/att_input_pattern.asp –

+0

Fügen Sie einfach einen 'change' Ereignis-Listener hinzu und entfernen Sie alle nicht-binären Zeichen. dh 'var input = document.getElementById ('binary-input'); input.addEventListener ('change', function() {input.value = input.value.replace (/ [^ 0-1]/g, '')}); 'gegeben' ' – Tobsta

+0

Beachten Sie, dass das Feld an den Server gesendet werden soll, den Sie benötigen serverseitige Validierung zu. – nnnnnn

Antwort

3

Sie können einen regulären Ausdruck (/[^01]/g) und replace alles außer 0 und 1 aus dem Wert des Eingangs zu entfernen.

document.getElementById("inp").oninput = function() { 
 
    var v = this.value;   // get the value from the input 
 
    v = v.replace(/[^01]/g, ''); // replace anything that isn't 0 or 1 by '' 
 
    this.value = v;    // set the value of the input to the new value 
 
}
<input id="inp"/>

Wenn Sie die Benutzer wollen immer noch Dinge in der Mitte zu bearbeiten, dann verwenden:

document.getElementById("inp").oninput = function() { 
 
    var pos = this.selectionStart; // save the position of the caret 
 
    
 
    var v = this.value; 
 
    v = v.replace(/[^01]/g, ''); 
 
    this.value = v; 
 
    
 
    this.selectionStart = pos; // restore it 
 
    this.selectionEnd = pos; // so no text will be selected 
 
}
<input id="inp"/>

Hinweis tha t Ich empfehle diesen letzten Ansatz nicht, da ich nicht sicher bin, wie viele Browser selectionStart und selectionEnd verarbeiten.

+0

Es wäre angenehmer für den Benutzer, wenn Sie einen Test hinzugefügt haben, um den Wert nicht zu aktualisieren, es sei denn, ungültige Zeichen werden eingegeben, weil der Cursor sich in dem Moment weiterbewegt, wenn Sie einen vorhandenen Wert bearbeiten. – nnnnnn

+0

@nnnnnn aber dann könnten sie einen illegalen Wert einfügen (das wäre ein größeres Problem als dieses). –

+0

Bitte nicht. Code wie dieser macht mich wahnsinnig, da ich nie sehen kann, was falsch ist, viel besser, um die Eingabe zu entwerten. – Gerrit0

0

Dies kann Ihnen helfen.

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 49'> 

Ich hoffe, es wird helfen. Grüße.