HTML-Texteingabe erlauben nur numerische Eingabe

StackOverflow https://stackoverflow.com/questions/469357

  •  19-08-2019
  •  | 
  •  

Frage

Gibt es einen schnellen Weg, um eine HTML-Texteingabe (<input type=text />) so einzustellen, dass nur numerische Tastenanschläge erlaubt (plus '')?

War es hilfreich?

Lösung

Hinweis: Dies ist eine aktualisierte Antwort. Ausführungen beziehen sich unten auf eine alte Version, die mit keycodes um verwirrte.

JavaScript

Die setInputFilter Funktion unten können Sie verwenden Sie Art des Eingangsfilters auf einen Text <input>, darunter verschiedene numerische Filter (siehe unten).

Im Gegensatz zu den meisten anderen Lösungen, dies unterstützt richtig Copy + Paste, Drag + Drop, alle Tastenkombinationen, alle Kontextmenü Operationen, alle nicht-typisierbaren Tasten (zB Cursor und Navigationstasten), die caret Position, alle Tastaturlayouts aller Sprachen und Plattformen und seit IE 9 .

Versuchen Sie es selbst auf JSFiddle . 

// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  });
}

// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value);
});

Einige Eingangsfilter möchten Sie vielleicht verwenden:

  • Integer Werte (nur positiv):
    /^\d*$/.test(value)
  • Integer Werte (positive und bis zu einer bestimmten Grenze):
    /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
  • Integer Werte (sowohl positiv als auch negativ):
    /^-?\d*$/.test(value)
  • Gleitpunkt Werte (sowohl . und , als Dezimalzeichen erlaubt):
    /^-?\d*[.,]?\d*$/.test(value)
  • Währung Werte (das heißt höchstens zwei Dezimalstellen):
    /^-?\d*[.,]?\d{0,2}$/.test(value)
  • A-Z nur (das heißt Grund lateinische Buchstaben):
    /^[a-z]*$/i.test(value)
  • lateinische Buchstaben nur (dh Englisch und die meisten europäischen Sprachen finden Sie unter https: // Unicode-Tabelle .com für Details über Unicode-Zeichenbereiche):
    /^[a-z\u00c0-\u024f]*$/i.test(value)
  • Hexadezimal Werte:
    /^[0-9a-f]*$/i.test(value)

Beachten Sie, dass Sie immer noch muss do Server-seitige Validierung!

jQuery

Es gibt auch eine jQuery-Version dieser. Siehe diese Antwort oder versuchen Sie es selbst auf JSFiddle .

HTML 5

HTML 5 hat eine native Lösung mit <input type="number"> (siehe Spezifikation ), aber beachten Sie Unterstützung, dass der Browser unterschiedlich:

  • wird Die meisten Browser nur die Eingabe bestätigen, wenn das Formular abschicken, und nicht bei der Eingabe.
  • Die meisten mobilen Browsern step, min nicht unterstützen und max Attribute.
  • Chrome (Version 71.0.3578.98) noch erlaubt dem Benutzer, die Zeichen e und E in das Feld einzugeben. Siehe auch diese Frage .
  • Firefox (Version 64.0) und Edge (EdgeHTML Version 17,17134) immer noch erlauben dem Benutzer jeder Text in das Feld eingeben.

Versuchen Sie es selbst auf w3schools.com .

Andere Tipps

Dieses DOM verwenden 

<input type='text' onkeypress='validate(event)' />

Und das Skript 

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Ich habe lange gesucht und hart für eine gute Antwort auf diese, und wir dringend <input type="number" brauchen, aber kurz kommt, dass diese 2 die knappste Möglichkeiten, wie ich kommen konnte mit: 

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Wenn Sie das nicht akzeptierten Zeichen zeigen für einen Bruchteil einer Sekunde nicht mögen, bevor gelöscht wird, unter dem Verfahren ist meine Lösung. Beachten Sie die zahlreichen zusätzlichen Bedingungen, ist dies zu vermeiden alle Arten von Navigation und Hotkeys deaktivieren. Wenn jemand weiß, wie dies compactify, lassen Sie es uns wissen! 

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Hier ist ein einfacher, die für genau eine Dezimalstelle erlaubt, aber nicht mehr: 

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

Und noch ein Beispiel, das gut für mich funktioniert: 

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

anhängen auch auf Tastendruck-Ereignis 

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

Und HTML: 

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Hier ist ein Beispiel jsFiddle

HTML5 hat <input type=number>, was das Richtige für Sie klingt. Derzeit sind nur Opera unterstützt nativ, aber es gibt ein Projekt , die eine JavaScript-Implementierung hat.

Die meisten Antworten hier haben alle die Schwäche der Verwendung von Tasten- Ereignisse .

Viele der Antworten würde Ihre Möglichkeiten einschränken, Textauswahl mit Tastaturmakros zu tun, kopieren + einfügen und unerwünschtes Verhalten, scheinen andere auf bestimmte jQuery Plugins ab, die Fliegen mit machineguns tötet.

Diese einfache Lösung scheint für mich am besten Cross-Plattform zu arbeiten, unabhängig von Eingabemechanismus (Tastendruck, Kopie + Paste, Rechtsklick Kopie + Paste, Sprache-zu-Text etc.). Alle Textauswahl Tastaturmakros würde immer noch funktionieren, und es wäre auch eine Fähigkeit, begrenzt einen nicht-numerischen Wert von Skript zu setzen. 

function forceNumeric(){
    this.value(this.value.replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input.numeric-text', forceNumeric);

Ich entschied mich, eine Kombination der beiden Antworten hier heißt erwähnt zu verwenden.

<input type="number" />

und 

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">

HTML5 unterstützt reguläre Ausdrücke, so könnte man diese verwenden: 

<input id="numbersOnly" pattern="[0-9.]+" type="text">

. Achtung: Einige Browser unterstützen dies noch nicht

JavaScript 

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

weitere könnten Sie Komma, Punkt und Minus (, .-)

hinzufügen 
  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML 

<input type="text" onkeydown="validateNumber(event);"/ >

2 Lösungen:

Verwenden Sie ein Formular Validator (zB mit jQuery Validierung Plugin )

Führt eine Überprüfung während der onblur (das heißt, wenn der Benutzer das Feld verläßt) Ereignis des Eingabefeldes, mit dem regulären Ausdruck: 

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

So einfach ....

// In einer JavaScript-Funktion (kann HTML oder PHP). 

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

In der Formular-Eingang: 

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

Mit dem Eingang max. (Diese oben ermöglicht eine 12-stellige Zahl)

Ein sicherer Ansatz, um den Wert der Eingangsprüfung statt Hijacking Drücken von Tasten und versucht keycodes zu filtern.

Auf diese Weise der Benutzer frei ist, um Tastaturpfeile, Zusatztasten, Backspace zu verwenden, löschen, verwenden Sie nicht Standard keyboars, verwenden Sie die Maus einfügen, per Drag & Drop Text, auch die Zugänglichkeit Eingänge verwendet werden.

Das folgende Skript ermöglicht es positive und negative Zahlen 

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed


var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}
<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

EDIT:. Ich meine alte Antwort entfernt, weil ich denke, es ist jetzt veraltet ist

Hier finden Sie erwähnte Lösung. In diesen Benutzer in der Lage sein, können nur numeric Wert eingeben, können auch Benutzer nicht in der Lage sein copy, paste, drag und drop in Eingang.

  

Erlaubte Zeichen 

0,1,2,3,4,5,6,7,8,9
  

Nicht erlaubt Charaktere und Charaktere durch Ereignisse

  • Alphabetische Wert
  • Sonderzeichen
  • Kopieren
  • Einfügen
  • Ziehen
  • Drop 

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Lassen Sie mich wissen, wenn es nicht funktioniert.

Sie können Muster für diese verwenden: 

<input id="numbers" pattern="[0-9.]+" type="number">

Hier können Sie sehen, die komplette mobile Website-Schnittstelle Tipps .

Wenn Sie auf das Gerät vorschlagen möchten (vielleicht ein Handy) zwischen alphanumerisch Sie <input type="number"> verwenden können.

Eine kurze und süße Implementierung mit jQuery und ersetzen () anstelle des Betrachtens event.keyCode oder event.which: 

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Nur noch geringer Nebeneffekt, dass der eingegebene Buchstabe scheint für einen Moment und CTRL / CMD + A erscheint ein wenig seltsam zu verhalten.

JavaScript-Code: 

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTML-Code: 

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

funktioniert perfekt, weil die Rück keycode 8 ist und ein regulärer Ausdruck ist es nicht lassen, so ist es eine einfache Möglichkeit, den Fehler zu umgehen:)

Nur eine andere Variante mit jQuery mit 

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

input type="number" ist ein HTML5-Attribut.

Im anderen Fall wird dieser Ihnen helfen: 

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

Ein weiteres Beispiel, wo Sie können hinzufügen nur Zahlen in das Eingabefeld ein, kann nicht Buchstaben 

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

verwenden Sie einfach type = "Zahl" jetzt dieses Attribut unterstützt in den meisten der Browser 

<input type="number" maxlength="3" ng-bind="first">

Sie können auch Eingangswert vergleichen (die als Zeichenfolge standardmäßig behandelt wird), um sich als numerische gezwungen, wie: 

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Sie müssen jedoch, dass zu Fall binden, wie keyup etc. 

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

Mit diesem DOM: 

<input type = "text" onkeydown = "validate(event)"/>

Und dieses Skript: 

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... oder dieses Skript, ohne indexOf, mit zwei for der ... 

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Ich benutzte das onkeydown Attribut statt onkeypress, weil das Attribut onkeydown vor onkeypress Attribut aktiviert ist. Das Problem in der Google Chrome-Browser sein würde.

Mit dem Attribut "onkeypress", TAB würde mit "prevent" auf Google Chrome unkontrollierbar sein, jedoch mit dem Attribut "onkeydown", TAB wird steuerbar!

ASCII-Code für das TAB => 9

Das erste Skript weniger Code als die zweite haben, muss jedoch das Array von ASCII-Zeichen haben alle Schlüssel.

Das zweite Skript ist viel größer als die erste, aber das Array braucht nicht alle Schlüssel. Die erste Ziffer in jeder Position des Arrays ist die Anzahl, wie oft jede Position gelesen wird. Für jeden Messwert wird 1 zum nächsten erhöht werden. Zum Beispiel:




NCount = 0

48 + nCount = 48

nCount + +

48 + nCount = 49

nCount + +

...

48 + nCount = 57




Im Fall von numerischen Tasten sind nur 10 (0 - 9)., Aber wenn sie waren 1 Million es nicht sinnvoll wäre, ein Array mit all diesen Schlüsseln erstellen

ASCII-Codes:

  • 8 ==> (Backspace);
  • 46 => (Löschen);
  • 37 => (Pfeil nach links);
  • 39 => (Pfeil nach rechts);
  • 48-57 => (Zahlen);
  • 36 => (home);
  • 35 => (end);

Dies ist eine verbesserte Funktion: 

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

Der beste Weg (alle Arten von Zahlen erlauben - real negativ, echte positive, ganze Zahl negativ, integer positiv) ist: 

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
});

Dies ist die erweiterte Version von geowa4 Lösung . Unterstützt min und max Attribute. Wenn die Zahl außerhalb des Bereichs liegt, wird der vorherige Wert angezeigt.

Sie können es hier testen.

Verbrauch: <input type=text class='number' maxlength=3 min=1 max=500> 

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Wenn die Eingänge sind dynamisch Verwendung dieses: 

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});

Meine Lösung für eine bessere Benutzererfahrung:

  

HTML 

<input type="tel">
  

jQuery 

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9','.']
  return keys.indexOf(event.key) > -1
})

Details:

Zu allererst Eingabetypen :

number zeigt nach oben / unten Pfeile, um den tatsächlichen Eingangsraum schrumpft, ich finde sie hässlich und sind nur dann sinnvoll, wenn die Zahl eine bestimmte Menge (Dinge wie Telefone, postleitzahlen, IDs ... brauchen sie nicht) repräsentiert tel bietet ähnliche Browser Validierungen der Anzahl ohne die Pfeile

Mit [Nummer / tel] auch numerische Tastatur auf mobilen Geräten hilft zeigt.

Für die JS Validierung I 2 Funktionen am Ende benötigen, einen für die normale Benutzereingabe (Druck) und die andere für eine Kopie + Paste fix (Wechsel), andere Kombinationen würden mich einen schrecklichen User Experience.

Ich verwende die zuverlässigen KeyboardEvent.key statt der jetzt veraltet KeyboardEvent.charCode

Und je nach Ihrer Browser-Unterstützung können Sie prüfen, mit Array.prototype.includes () statt der schlecht Namen Array.prototype.indexOf () (für true / false Ergebnisse)

Eine einfache Möglichkeit, dieses Problem zu lösen ist die Implementierung eine jQuery-Funktion mit regex in der Textbox zum Beispiel eingegeben, die Charaters zu überprüfen:

Ihr HTML-Code: 

<input class="integerInput" type="text">

Und die js Funktion mit jQuery 

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});


$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });
<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top