HTML-Texteingabe erlaubt nur numerische Eingaben

Question

Gibt es eine schnelle Möglichkeit, eine HTML-Texteingabe ( <input type=text /> ), um nur numerische Tastenanschläge (plus '.') zuzulassen?

Answer 1

Die Lösung finden Sie untenstehend. In diesem Benutzer kann in der Lage sein, nur eingeben numeric Wert, kann auch der Benutzer nicht in der Lage sein copy , paste , drag y drop in die Eingabe.

Erlaubte Zeichen

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

Nicht erlaubte Charaktere und Charaktere durch Ereignisse

• Alphabetischer Wert
• Besondere Zeichen
• Kopieren
• Kleister
• Ziehen

• Ablegen

  $(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.

Answer 2

Wenn Sie dem Gerät (z. B. einem Mobiltelefon) vorschlagen möchten, ob es alphanumerisch oder numerisch sein soll, können Sie Folgendes verwenden <input type="number"> .

Answer 3

Eine kurze und süße Implementierung, die jQuery und replace() verwendet, anstatt event.keyCode oder event.which zu betrachten:

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

Einziger kleiner Nebeneffekt ist, dass der getippte Buchstabe kurzzeitig erscheint und CTRL/CMD + A sich etwas seltsam zu verhalten scheint.

Answer 4

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ücktaste 8 ist und ein Regex-Ausdruck dies nicht zulässt, so dass es eine einfache Möglichkeit ist, den Fehler zu umgehen :)

Answer 5

Verwenden Sie einfach type="Zahl" Dieses Attribut wird nun von den meisten Browsern unterstützt

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