web-dev-qa-db-de.com

Melhor maneira de restringir um texto apenas a números?

Eu estou usando o seguinte Javascript für das Zurücksetzen des Textes auf der Website für die Eingabe der Nummer und das Zurücksetzen des Datums. O problema é que REALMENTE rejeita todas as outras entradas-chave, comoctrl-AFür die Auswahl eines Textes oder einer Qualifikation außerhalb der Navigationctrl-Tductrl-Wenquanto a caixa de texto está selecionada. Alguém sabe de um script melhor para permitir apenas entrada numérica, mas não bloquear comandos normais? Obrigado Aqui está o código que estou usando agora:

function numbersonly(e, decimal) 
{
    var key;
    var keychar;

    if (window.event) 
        key = window.event.keyCode;
    else if (e) 
        key = e.which;
    else 
        return true;

    keychar = String.fromCharCode(key);

    if ((key==null) || (key==0) || (key==8) ||  (key==9) || (key==13) || (key==27))
       return true;     
    else if ((("0123456789").indexOf(keychar) > -1))
       return true;
    else if (decimal && (keychar == "."))
       return true;        
    else
       return false;
}

Edit: Nenhuma das soluções fornecidas resolveu o meu problema de permitir comandos comoctrl-Aenquanto a caixa de texto está selecionada. Es wird empfohlen, die Originalversion zu verwenden. Ah bem.

39
RobHardgood

Dies ist etwas, das ich zu einem anderen Mal nur für Zahlen gemacht habe, es wird auch alle Formatierer zulassen.

jQuery

$('input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.Push(i);

    if (!(a.indexOf(k)>=0))
        e.preventDefault();
});​

Versuch es

http://jsfiddle.net/zpg8k/

Als Hinweis sollten Sie auch auf Submit/Server-Seite filtern, um das Kontextmenü und Browser einzufügen, die das Einfügeereignis nicht unterstützen.

Bearbeiten, um mehrere Methoden auszuarbeiten

Ich sehe, dass Sie in der akzeptierten Antwort herumhüpfen, also werde ich etwas klarer machen. Sie können jede der hier aufgeführten Methoden wirklich verwenden, sie funktionieren alle. Was ich persönlich tun würde, ist meins für die Live-Filterung auf Client-Seite, und dann auf Einreichungs- und Serverseite RegEx wie von anderen vorgeschlagen. Allerdings ist no client side an sich zu 100% effektiv, da mich nichts daran hindert, document.getElementById('theInput').value = 'Hey, letters.'; in die Konsole zu stellen und jegliche clientseitige Überprüfung zu umgehen (außer für das Abfragen), aber ich könnte einfach die setInterval von der Konsole auch). Verwenden Sie eine beliebige clientseitige Lösung, die Sie möchten, stellen Sie jedoch sicher, dass Sie auch auf Submit- und Server-Seite etwas implementieren.

Bearbeiten Sie 2 - @Tim Down

Okay, in den Kommentaren musste ich zwei Dinge anpassen, an die ich nicht dachte. Zunächst wird anstelle von keydown der Keydown-Befehl aktualisiert. Das Fehlen von indexOf in IE (ernsthaft Microsoft!?) Bricht das obige Beispiel ebenfalls. Hier ist eine Alternative 

$('input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.Push(i);

    if (!($.inArray(k,a)>=0))
        e.preventDefault();
});​

Neues jsfiddle: http://jsfiddle.net/umNuB/

35
Robert
     .keypress(function(e)
               {
                 var key_codes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8];

                 if (!($.inArray(e.which, key_codes) >= 0)) {
                   e.preventDefault();
                 }
               });

Sie benötigen auch die Rücktaste und die Löschtasten;)

15
ialpert

Dies funktioniert in IE, Chrome und Firefox:

<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />
14
Hamund

http://jsfiddle.net/PgHFp/

<html>
<head>
<title>Test</title>
<script language="javascript">
function checkInput(ob) {
  var invalidChars = /[^0-9]/gi
  if(invalidChars.test(ob.value)) {
            ob.value = ob.value.replace(invalidChars,"");
      }
}
</script>
</head>

<body>
    <input type="text" onkeyup="checkInput(this)"/>
</body>
</html>
11
dogbane

Das einzige Ereignis, das Informationen über das eingegebene Zeichen enthält, ist keypress. Alles, was mit dem Zeichen zu tun hat, das Sie aus der keyCode-Eigenschaft von keydown oder keyup-Ereignissen entnehmen können, ist unzuverlässig und hängt von einer bestimmten Tastaturzuordnung ab. Im Folgenden werden nicht-numerische Tastatureingaben für alle gängigen Browser unter Verwendung des aus dem Ereignis keypress erhaltenen Zeichens verhindert. Dies hindert den Benutzer nicht daran, nicht numerischen Text einzufügen oder zu ziehen.

var input = document.getElementById("your_input");

input.onkeypress = function(evt) {
    evt = evt || window.event;
    if (!evt.ctrlKey && !evt.metaKey && !evt.altKey) {
        var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which;
        if (charCode && !/\d/.test(String.fromCharCode(charCode))) {
            return false;
        }
    }
};
4
Tim Down

Verwenden Sie Regex, um nicht-nummerierte Zeichen zu entfernen, wenn eine Taste gedrückt wird oder das Textfeld den Fokus verliert.

var numInput;
window.onload = function () {   
    numInput = document.getElementById('numonly');
    numInput.onkeydown = numInput.onblur = numInput.onkeyup = function()
    {
        numInput.value = numInput.value.replace(/[^0-9]+/,"");
    }
}
4
Randy the Dev

Möglicherweise verwenden Sie Bootstrap. Wenn ja, kann dies ausreichen: 

<input type="text" data-mask="9999999"> 

Eingabemaske

4
nicooga

Ich benutze das:

    oEl.keypress(function(ev)
    {
        var sKey = String.fromCharCode(ev.which);
        if (!sKey.match(/[0-9]/) || !sKey === "") 
            ev.preventDefault();            
    });

Der Vorteil ist, dass jede Taste, die keine Eingabe in das Feld liefert, weiterhin zulässig ist, so dass Sie sich nicht um jeden speziellen Schlüssel kümmern müssen. Sogar Combos wie STRG + R funktionieren immer noch.

EDIT Da dies in Firefox nicht funktioniert, musste ich die Funktion ein wenig ändern:

    oEl.keypress(function(ev)
    {
        var iKeyCode = ev.which || ev.keyCode;
        var aSpecialKeysForFirefox = [8, 9, 13, 27, 37, 38, 39, 40, 46];
        var sKey = String.fromCharCode(iKeyCode);
        if (sKey !== "" && $.inArray(iKeyCode, aSpecialKeysForFirefox ) < 0 && !sKey.match(/[0-9]/)) {
            ev.preventDefault();
        }
    });

Erklärung Alle Browser behandeln das Jquerys-Tastendruckereignis unterschiedlich. Damit es in FF funktioniert, wird der $ .inArray-Check hinzugefügt. Da das Tastendruckereignis von firefoxs nicht ausgelöst wird, wenn Kombinationen wie strg + tab verwendet werden, aber bei den anderen ist der Ansatz von key.match noch etwas wertvoller, da er diese Kombinationen ermöglicht. 

4

Mit dem folgenden Code verwende ich ausgiebig. Ich habe das Skript in einem Forum gefunden, aber modifiziert und erweitert, um meinen Bedürfnissen gerecht zu werden:

<script type="text/javascript">
    // Restrict user input in a text field
    // create as many regular expressions here as you need:
    var digitsOnly = /[1234567890]/g;
    var integerOnly = /[0-9\.]/g;
    var alphaOnly = /[A-Za-z]/g;
    var usernameOnly = /[0-9A-Za-z\._-]/g;

    function restrictInput(myfield, e, restrictionType, checkdot){
        if (!e) var e = window.event
        if (e.keyCode) code = e.keyCode;
        else if (e.which) code = e.which;
        var character = String.fromCharCode(code);

        // if user pressed esc... remove focus from field...
        if (code==27) { this.blur(); return false; }

        // ignore if the user presses other keys
        // strange because code: 39 is the down key AND ' key...
        // and DEL also equals .
        if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
            if (character.match(restrictionType)) {
                if(checkdot == "checkdot"){
                    return !isNaN(myfield.value.toString() + character);
                } else {
                    return true;
                }
            } else {
                return false;
            }
        }
    }
</script>

Unterschiedliche Verwendungsmethoden wären:

<!-- To accept only alphabets -->
<input type="text" onkeypress="return restrictInput(this, event, alphaOnly);">
<!-- To accept only numbers without dot -->
<input type="text" onkeypress="return restrictInput(this, event, digitsOnly);">
<!-- To accept only numbers and dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly);">
<!-- To accept only numbers and only one dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly, 'checkdot');">
<!-- To accept only characters for a username field -->
<input type="text" onkeypress="return restrictInput(this, event, usernameOnly);">
3
Nirmal

Fügen Sie <script type="text/javascript" src="jquery.numeric.js"></script> hinzu und verwenden Sie dann

 $("element").numeric({ decimal: false, negative: false });
3
IlludiumPu36

Ich weiß, dass es bereits viele Antworten gibt, aber um Einfachheit möchte ich eine weitere Antwort hinzufügen, die einfach und selbsterklärend ist, in der wir Schlüsselcodes müssen nicht beachtet werden und funktioniert auch über alle Browser

document.getElementById('myinput').onkeydown = function(e)
 {
     console.log(e.key);
     //console.log(e.target.value);
     switch (e.key)
     {
         case "1":
         case "2":
         case "3":
         case "4":
         case "5":
         case "6":
         case "7":
         case "8":
         case "9":
         case "0":
         case "Backspace":
             return true;
             break;

         case ".":
             if (e.target.value.indexOf(".") == -1)
             {
                 return true;
             }
             else
             {
                 return false;
             }
             break;

         default:
             return false;
     }

 }
<input type="text" placeholder="Enter Value" id="myinput" />

2
vibs2006

Dies ist eine Variante der Antwort von Robert, die die Eingabe eines einzelnen Dezimalpunkts ermöglicht. Wenn bereits ein Dezimalpunkt eingegeben wurde, werden nur Zahlen als Eingabe akzeptiert.

JSFiddle - Eingabe der Dezimalzahl

// Allow only decimal number input

$('#decimalInput').keypress(function (e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
    a.Push(i);

    // allow a max of 1 decimal point to be entered
    if (this.value.indexOf(".") === -1) {
        a.Push(46);
    }

    if (!(a.indexOf(k) >= 0)) e.preventDefault();

    $('span').text('KeyCode: ' + k);
});
2
Jon Crowell

kürzer und leicht verständlich:

$('#someID').keypress(function(e) { 
    var k = e.which;
    if (k <= 48 || k >= 58) {e.preventDefault()};
});
2
ZAJDAN

dadurch werden auch die Numpad-Eingaben aktiviert.

.keydown(function(event){                                     
    if(event.keyCode == 8 || event.keyCode == 46)             
        return true;                                         
    if(event.keyCode >= 96 && event.keyCode <= 105)           
        return true;                                          
    if(isNaN(parseInt(String.fromCharCode(event.keyCode),10)))
       return false;                                          
}); 
1

Todas as respostas estão desatualizadas, demoradas e irão = ursächlich aborrecimento aos seus usuários. A maioria deles nem sequer filtra ou conteúdo colado zulassen.

Em vez de filtrar an entrada, faça alguma validação de enviar o formulário e, em seguida, também no lado do servidor.

HTML inclui validação:

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

Feito. Isso também permite o teclado numérico no celular.

1
bfred.it

Es ist darauf hinzuweisen, dass Sie die Kontrolle auch über das Frontend (Javascript, HTML usw.) auf dem Server überprüfen müssen, da Sie nichts davon abhalten, Javascript zu deaktivieren Versehen Sie Junk absichtlich in Ihrem Formular, um Sie zu hacken.

Mein Tipp: Verwenden Sie das HTML5-Markup, damit Browser, die es unterstützen, es verwenden. Verwenden Sie auch die zuvor vorgeschlagene JQuery-Option (die ursprüngliche Lösung hat möglicherweise Fehler, aber es scheint, als hätten die Kommentare das durchgearbeitet). Und dann auch serverseitige Validierung.

1
Spudley

Hier ist meine Lösung: eine Kombination der unten aufgeführten Arbeitsformen.

var checkInput = function(e) {
        if (!e) {
            e = window.event;
        }

        var code = e.keyCode || e.which;

        if (!e.ctrlKey) {

            //46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
            if (code == 8 || code == 13 || code == 9 || code == 27 || code == 46)
                return true;
            //35..39 - home, end, left, right
            if (code >= 35 && code <= 39)
                return true;
            //numpad numbers
            if (code >= 96 && code <= 105)
                return true;
            //keyboard numbers
            if (isNaN(parseInt(String.fromCharCode(code), 10))) {
                e.preventDefault();
                return false;
            }
        }
        return true;
    };
1
Uygar

Ich bin auf Ihre Frage gestoßen, als ich versuchte, dies selbst herauszufinden. Hier ist die Lösung, die ich gefunden habe.

// Prevent user from entering non-numeric characters in number boxes.
(function (inputs) {
    var input;
    var f = function (e) {
        var unicodeRe = /U\+(\d+)/;
        // Chrome doesn't support the standard key property, so use keyIdentifier instead.
        // Instead of the actual character that "key" returns, keyIdentifier returns
        // A string such as "U+004F" representing the unicode character.

        // For special characters (e.g., "Shift", a string containing the name of the key is returned.)
        var ch = e.key || e.keyIdentifier;
        var match = ch.match(unicodeRe);
        // keyIdentifier returns a unicode. Convert to string.
        if (match) {
            ch = String.fromCharCode(Number.parseInt(match[1], 16));
        }
        console.log(ch);
        if (ch.length === 1 && /[^0-9]/.test(ch)) {
            if (!/[\b]/.test(ch)) { // Don't prevent backspace.
                e.preventDefault();
            }
        }
    };
    for (var i = 0, l = inputs.length; i < l; i += 1) {
        input = inputs[i];
        input.onkeydown = f;
    }
}(document.querySelectorAll("input[type=number],#routeFilterBox")));

Bearbeiten: Ich habe festgestellt, dass meine Lösung es dem Benutzer nicht ermöglicht, Zahlen über das Nummernfeld in Chrome einzugeben. Die Tasten 0-9 scheinen das Zeichen "` "für 0 und A-I für die übrigen Zifferntasten zurückzugeben.

1
Jeff Jacobson

Meine Funktionen:

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


$('.input_float_only').on('input', function(e) {
    var $var = $(this).val().replace(/[^0-9\.]/g, '');
    var $aVar = $var.split('.');

    if($aVar.length > 2) {
        $var = $aVar[0] + '.' + $aVar[1];
    }

    $(this).val($var);
});
1
Tin Nguyen

Um zu verhindern, dass etwas außer Zahlen in ein Textfeld eingegeben wird, aber andere Schaltflächen funktionieren (z. B. Löschen, Verschieben, Tabulator usw.), sehen Sie sich eine Referenz der Javascript-Tastencodes an ; alles ab 65 (bis 222) kann gesperrt werden. 

Mit Jquery und Javascript würde das so aussehen:

$('#textFieldId').keydown(function(event) {
    if ( event.keyCode > 64 ) {
        event.preventDefault();
    }
});

Die Schlüsselcodes sind in Javascript gleich, unabhängig davon, ob Jquery verwendet wird oder nicht.

1
Asher Garland

Es gibt meine derzeitige Lösung der numerischen Eingabe, die in verschiedenen Browsern getestet werden muss, scheint aber zu funktionieren

Unterstützt Komma und Punkt als Trennzeichen (tschechisch ist Komma), Leerzeichen und Numpad/Tastaturnummern. Strg + Strg + A oder Strg + X zulassen, Pfeilnavigation und Block löschen Strg + V. Reagieren Sie auf die Escape-Taste, indem Sie die Eingabe verwischen.

Schau dir mein Kaffee-Skript an:

(($) ->
  $.fn.onlyNumbers = ->
    @each ->
      $(@).keydown (e) ->
        # get code of key
        code = if e.keyCode then e.keyCode else e.which

        return $(@).blur() if code is 27 # blur on escape
        return if code in [46, 8, 9, 13] # 46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
        return if (e.ctrlKey or e.metaKey) and code in [65, 67, 88] # ctrl|command + [a, c, x]
        return if code in [96..105] # numpad numbers
        return if code in [48..57] # numbers on keyboard
        return if code in [35..39] # 35..39 - home, end, left, right
        return if code in [188, 190, 32] # comma, period, space
        return if code in [44] # comma, period,

        e.returnValue = false # IE hate you
        e.preventDefault();

      $(@).keypress (e) ->
        code = if e.keyCode then e.keyCode else e.which
        return if code in [44, 46, 32] # comma, period, space
        return if code in [48..57] # numbers on keyboard
        e.returnValue = false # IE hate you
        e.preventDefault();

) jQuery

Sie können Javascript hier kompilieren http://goo.gl/SbyhXN

0
OzzyCzech

Sie können das Ereignis in HTML verarbeiten, indem Sie die Keypresshandler-Funktion.

function keypresshandler(event)
{
     var charCode = event.keyCode;

     //You condition
     if (charCode == 58 ){

        event.preventDefault();

        return false;
     }        
} 
0
Priyanthi

JavaScript wird für das Zurücksetzen von Zeichen und Zeichen im Text, in der Nachricht, im Ausschluss oder in der Rücktaste aktiviert und deaktiviert. Trecho de código JavaScript - Erlaubt keine TextBox, Restringir alfabetos e caracteres especiais

Testen Sie sie IE & Chrome.

Função JavaScript

<script type="text/javascript">
    /*code: 48-57 Numbers
      8  - Backspace,
      35 - home key, 36 - End key
      37-40: Arrow keys, 46 - Delete key*/
    function restrictAlphabets(e){
        var x=e.which||e.keycode;
        if((x>=48 && x<=57) || x==8 ||
            (x>=35 && x<=40)|| x==46)
            return true;
        else
            return false;
    }
</script>

Código-fonte HTML com JavaScript

<html>
    <head>
        <title>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</title>
        <script type="text/javascript">
            /*code: 48-57 Numbers
              8  - Backspace,
              35 - home key, 36 - End key
              37-40: Arrow keys, 46 - Delete key*/
            function restrictAlphabets(e){
                var x=e.which||e.keycode;
                if((x>=48 && x<=57) || x==8 ||
                    (x>=35 && x<=40)|| x==46)
                    return true;
                else
                    return false;
            }
        </script>
    </head>
<body style="text-align: center;">
    <h1>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</h1>
    <big>Enter numbers only: </big>
    <input type="text" onkeypress='return restrictAlphabets(event)'/>
</body>

</html>

Aktualisierung

0
Durgesh Pandey

Sie können Änderungen vornehmen, um den Schlüsselcode für die Strg-Tasten zu akzeptieren: 17, 18, 19, 20 .

function numbersonly(e, decimal) {
var key;
var keychar;

if (window.event) 
    key = window.event.keyCode;
else if (e) 
    key = e.which;
else 
    return true;

keychar = String.fromCharCode(key);

if ((key==null) || (key==0) || (key==8) ||  (key==9) || (key==13) || (key==27) || (key==17) || (key==18) || (key==19) || (key==20))
   return true;     
else if ((("0123456789").indexOf(keychar) > -1))
   return true;
else if (decimal && (keychar == "."))
   return true;        
else
   return false;
}
0
Bruno Silva

Javascript wird häufig auf der Client-Seite des Browsers verwendet, um einfache Aufgaben auszuführen, für die ansonsten ein vollständiger Postback auf den Server erforderlich wäre. Viele dieser einfachen Aufgaben umfassen die Verarbeitung von Text oder Zeichen, die in ein Formularelement auf einer Webseite eingegeben werden, und es ist häufig erforderlich, den mit einem Zeichen verknüpften Javascript-Schlüsselcode zu kennen. Hier ist ein Hinweis.

Drücken Sie eine Taste in das Textfeld, um den entsprechenden Javascript-Schlüsselcode anzuzeigen.

        function restrictCharacters(evt) {

            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (((charCode >= '48') && (charCode <= '57')) || (charCode == '44')) {
                return true;
            }
            else {
                return false;
            }
        }
Enter Text:
<input type="text" id="number" onkeypress="return restrictCharacters(event);" />

0
Mayur Narula

Dies ist mein Plugin für diesen Fall:

 (function( $ ) {
    $.fn.numbers = function(options) {
      $(this).keypress(function(evt){
          var setting = $.extend( {
                'digits' : 8
              }, options);
          if($(this).val().length > (setting.digits - 1) && evt.which != 8){
              evt.preventDefault(); 
          }
          else{
              if(evt.which < 48 || evt.which > 57){
                if(evt.keyCode != 8){
                    evt.preventDefault();  
                }
              }
          }
      });
    };
  })( jQuery );

Benutzen:

 $('#limin').numbers({digits:3});
 $('#limax').numbers();
0
jortsc

Sie können dies tun, um nur Zahlen im Textfeld, .__ zu akzeptieren. 

 function onChange(event){
   var ckeckChars = /[^0-9]/gi;
   if(checkChars.test(event.target.value)) {
        event.target.value = event.target.value.replace(ckeckChars,"");
  }
0
Venkatesh Somu
  document.getElementById('myinput').onkeydown = function(e) {
      if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8
      || e.keyCode == 9)) {
        return false;
      }
  }
0
user3121518