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.
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
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/
.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;)
Dies funktioniert in IE, Chrome und Firefox:
<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />
<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>
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;
}
}
};
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]+/,"");
}
}
Möglicherweise verwenden Sie Bootstrap. Wenn ja, kann dies ausreichen:
<input type="text" data-mask="9999999">
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.
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);">
Fügen Sie <script type="text/javascript" src="jquery.numeric.js"></script> hinzu und verwenden Sie dann
$("element").numeric({ decimal: false, negative: false });
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" />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);
});
kürzer und leicht verständlich:
$('#someID').keypress(function(e) {
var k = e.which;
if (k <= 48 || k >= 58) {e.preventDefault()};
});
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;
});
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.
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.
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;
};
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.
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);
});
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.
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
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;
}
}
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>
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;
}
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);" />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();
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,"");
}
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;
}
}