Ich muss sicherstellen, dass ein bestimmtes <input>
-Feld nur Zahlen als Wert ..__ enthält. Daher wird es nicht übermittelt, sodass das Validieren während der Übermittlung keine Option ist. Ich möchte, dass der Benutzer keine anderen Zeichen als Zahlen eingeben kann.
Gibt es einen ordentlichen Weg, um dies zu erreichen?
Sie können HTML5-Eingabetypnummer verwenden, um nur Zahleneinträge einzuschränken:
<input type="number" name="someid" />
Dies funktioniert nur im HTML5-Beschwerdebrowser. Stellen Sie sicher, dass der Doctype Ihres HTML-Dokuments lautet:
<!DOCTYPE html>
Siehe auch https://github.com/jonstipe/number-polyfill für transparente Unterstützung in älteren Browsern.
Update: Dafür gibt es eine neue und sehr einfache Lösung:
Damit können Sie den Eingabefilter any für einen Text
<input>
, .__ verwenden. einschließlich verschiedener numerischer Filter. Dies wird korrekt mit Kopieren + Einfügen, Ziehen + Ablegen, Tastenkombinationen, Kontextmenüvorgänge, Tasten, die nicht eingegeben werden können, und alle Tastaturlayouts.
Siehe diese Antwort oder probiere es selbst bei JSFiddle .
Für allgemeine Zwecke können Sie die JS-Validierung wie folgt durchführen:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
Wenn Sie Dezimalzahlen zulassen möchten, ersetzen Sie die "if-Bedingung" durch Folgendes:
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
Quelle: HTML-Texteingabe erlaubt nur numerische Eingabe
JSFiddle Demo: http://jsfiddle.net/viralpatel/nSjy7/
Sie können das Musterattribut auch in html5 verwenden:
<input type="text" name="name" pattern="[0-9]" title="Title" />
Wenn Ihr Doctype nicht html
ist, müssen Sie etwas Javascript/Jquery verwenden.
Bitte versuche diesen Code zusammen mit dem Eingabefeld
<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>
es wird gut funktionieren.
Sie können einen <input type="number" />
verwenden. Dadurch können nur Zahlen in das Eingabefeld eingegeben werden.
Beispiel: http://jsfiddle.net/SPqY3/
Bitte beachten Sie, dass das Eingabe type="number"
-Tag nur in neueren Browsern unterstützt wird.
Für Firefox können Sie die Eingabe mit Hilfe von Javascript überprüfen:
Update 2018-03-12: Die Browserunterstützung ist jetzt viel besser: Jetzt wird Folgendes unterstützt:
function AllowOnlyNumbers(e) {
e = (e) ? e : window.event;
var key = null;
var charsKeys = [
97, // a Ctrl + a Select All
65, // A Ctrl + A Select All
99, // c Ctrl + c Copy
67, // C Ctrl + C Copy
118, // v Ctrl + v paste
86, // V Ctrl + V paste
115, // s Ctrl + s save
83, // S Ctrl + S save
112, // p Ctrl + p print
80 // P Ctrl + P print
];
var specialKeys = [
8, // backspace
9, // tab
27, // escape
13, // enter
35, // Home & shiftKey + #
36, // End & shiftKey + $
37, // left arrow & shiftKey + %
39, //right arrow & '
46, // delete & .
45 //Ins & -
];
key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
//console.log("e.charCode: " + e.charCode + ", " + "e.which: " + e.which + ", " + "e.keyCode: " + e.keyCode);
//console.log(String.fromCharCode(key));
// check if pressed key is not number
if (key && key < 48 || key > 57) {
//Allow: Ctrl + char for action save, print, copy, ...etc
if ((e.ctrlKey && charsKeys.indexOf(key) != -1) ||
//Fix Issue: f1 : f12 Or Ctrl + f1 : f12, in Firefox browser
(navigator.userAgent.indexOf("Firefox") != -1 && ((e.ctrlKey && e.keyCode && e.keyCode > 0 && key >= 112 && key <= 123) || (e.keyCode && e.keyCode > 0 && key && key >= 112 && key <= 123)))) {
return true
}
// Allow: Special Keys
else if (specialKeys.indexOf(key) != -1) {
//Fix Issue: right arrow & Delete & ins in FireFox
if ((key == 39 || key == 45 || key == 46)) {
return (navigator.userAgent.indexOf("Firefox") != -1 && e.keyCode != undefined && e.keyCode > 0);
}
//DisAllow : "#" & "$" & "%"
//add e.altKey to prevent AltGr chars
else if ((e.shiftKey || e.altKey) && (key == 35 || key == 36 || key == 37)) {
return false;
}
else {
return true;
}
}
else {
return false;
}
}
else {
return true;
}
}
<h1>Integer Textbox</h1>
<input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />
Ich habe ein bisschen mit diesem gekämpft. Viele Lösungen hier und anderswo erschienen kompliziert. Diese Lösung verwendet jQuery/javascript neben HTML.
<input type="number" min="1" class="validateNumber">
$(document).on('change', '.validateNumber', function() {
var abc = parseInt($(this).val());
if(isNaN(abc)) { abc = 1; }
$(this).val(abc);
});
In meinem Fall verfolgte ich kleine Mengen mit einem Mindestwert von 1, daher wurde im Eingabe-Tag min = "1" und in der isNaN () - Prüfung abc = 1 überprüft. Bei nur positiven Zahlen können Sie diese Werte in 0 ändern und sogar die min = "1" aus dem Eingabe-Tag entfernen, um negative Zahlen zu berücksichtigen.
Dies funktioniert auch für mehrere Boxen (und Sie könnten etwas Zeit sparen, indem Sie sie einzeln anhand der ID erledigen). Fügen Sie bei Bedarf einfach die Klasse "validateNumber" hinzu.
Erklärung
parseInt () macht im Grunde das, was Sie brauchen, mit der Ausnahme, dass es NaN anstelle eines ganzzahligen Werts zurückgibt. Mit einem einfachen if () können Sie den "Fallback" -Wert setzen, den Sie in allen Fällen bevorzugen, in denen NaN zurückgegeben wird :-). Auch W3 gibt an, hier , dass die globale Version von NaN vor der Überprüfung eine Typumwandlung vornimmt. .__ Alle an einen Server/Backend gesendeten Werte sollten dort noch geprüft werden!
<input
onkeyup="value=isNaN(parseFloat(value))?1000:value"
type="number"
value="1000"
>
onkeyup
wird ausgelöst, wenn die Taste losgelassen wird.
isNaN(parseFloat(value))?
prüft, ob der Eingabewert keine Zahl ist.
Wenn es sich nicht um eine Zahl handelt, wird der Wert auf 1000 gesetzt. :
Wenn es sich um eine Zahl handelt, wird der Wert auf den Wert gesetzt.
note: Aus irgendeinem Grund funktioniert es nur mit type="number"
Um es noch aufregender zu machen, können Sie auch eine Grenze haben:
<input
onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
type="number"
value="1000"
>
Genießen!
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />
und in den js:
function isNumber(e){
e = e || window.event;
var charCode = e.which ? e.which : e.keyCode;
return /\d/.test(String.fromCharCode(charCode));
}
oder Sie können es auf eine komplizierte Art und Weise schreiben:
<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />
Hinweis : Cross-Browser und Regex im Literal.
wenn Sie HTML5 verwenden können, können Sie <input type="number" />
Wenn nicht, müssen Sie es entweder durch Javascript tun, da Sie sagten, dass es nicht von Codebehind aus gesendet wird.
<input id="numbersOnly" onkeypress='validate()' />
function validate(){
var returnString;
var text = document.getElementByID('numbersOnly').value;
var regex = /[0-9]|\./;
var anArray = text.split('');
for(var i=0; i<anArray.length; i++){
if(!regex.test(anArray[i]))
{
anArray[i] = '';
}
}
for(var i=0; i<anArray.length; i++) {
returnString += anArray[i];
}
document.getElementByID('numbersOnly').value = returnString;
}
PS hat den Code nicht getestet, er sollte jedoch mehr oder weniger korrekt sein, wenn nicht nach Tippfehlern gesucht wird: D Möglicherweise möchten Sie noch ein paar weitere Dinge hinzufügen, z mach das schneller: D
Fügen Sie Ihrem Eingabe-Tag Folgendes hinzu: onkeyup = "value = value.replace (/ [^\d]/g, '')"
Ich habe einige Antworten aktualisiert, um Folgendes hinzuzufügen:
Geben Sie an, wie viele Nachkommastellen zulässig sind.
String.prototype.isDecimal = function isDecimal(evt,decimalPts) {
debugger;
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
return false;
//Prevent more than one point
if (charCode == 46 && this.includes("."))
return false;
// Restrict the needed decimal digits
if (this.includes("."))
{
var number = [];
number = this.split(".");
if (number[1].length == decimalPts)
return false;
}
return true;
};
wenn keine Ganzzahl gesetzt ist 0
<input type="text" id="min-value" />
$('#min-value').change(function ()
{
var checkvalue = $('#min-value').val();
if (checkvalue != parseInt(checkvalue))
$('#min-value').val(0);
});
In meinem Projekt des Browserübergreifenden Filters des Wertes des Texteingabeelements auf Ihrer Webseite mit JavaScript-Sprache finden Sie folgende Informationen: Input Key Filter . Sie können den Wert als Ganzzahl, Float-Nummer oder als benutzerdefinierten Filter, z. B. als Telefonnummernfilter, filtern. Sehen Sie sich ein Beispiel für die Eingabe einer ganzen Zahl an:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Input Key Filter Test</title>
<meta name="author" content="Andrej Hristoliubov [email protected]">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- For compatibility of IE browser with audio element in the beep() function.
https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">
<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
</head>
<body>
<h1>Integer field</h1>
<input id="Integer">
<script>
CreateIntFilter("Integer", function(event){//onChange event
inputKeyFilter.RemoveMyTooltip();
var elementNewInteger = document.getElementById("NewInteger");
var integer = parseInt(this.value);
if(inputKeyFilter.isNaN(integer, this)){
elementNewInteger.innerHTML = "";
return;
}
//elementNewInteger.innerText = integer;//Uncompatible with FireFox
elementNewInteger.innerHTML = integer;
}
//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
, function(event){ inputKeyFilter.isNaN(parseInt(this.value), this); }
);
</script>
New integer: <span id="NewInteger"></span>
</body>
</html>
Siehe auch meine Seite "Integer-Feld:" des Beispiels des Eingabeschlüsselfilters
Die akzeptierte Antwort:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
Es ist gut, aber nicht perfekt. Es klappt für mich, aber ich bekomme eine Warnung, dass die if-Anweisung vereinfacht werden kann.
Dann sieht es so aus, was viel schöner ist:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode;
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
Würde den ursprünglichen Beitrag kommentieren, aber mein Ruf ist zu gering, um dies zu tun (erstellt gerade dieses Konto).
Sie können den Tag <input>
mit dem Attributtyp = 'number' verwenden.
Zum Beispiel können Sie <input type='number' />
verwenden.
Dieses Eingabefeld lässt nur numerische Werte zu. Sie können auch den Minimalwert und den Maximalwert angeben, die von diesem Feld akzeptiert werden sollen.
Wie wäre es mit <input type="number"...>
?
http://www.w3schools.com/tags/tag_input.asp
Auch hier ist eine Frage, die einige Beispiele für die Verwendung von Javascript zur Validierung hat .
Update: verknüpft mit einer besseren Frage (Danke, Alexblum).
Ich habe regulären Ausdruck verwendet, um den Eingabewert durch das erforderliche Muster zu ersetzen.
var userName = document.querySelector('#numberField');
userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {
var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
this.value = newValue;
}
<input type="text" id="numberField">
Schneller und einfacher Code
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />
Dies erlaubt nur die Verwendung von Nummern und Rücktasten.
Wenn Sie auch einen Dezimalteil benötigen, verwenden Sie dieses Codefragment
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
Ich benutze dies für Postleitzahlen, schnell und einfach.
<input type="text" id="Zip_code" name="Zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
Für allgemeine Zwecke können Sie die JS-Validierung wie folgt durchführen:
Es funktioniert für numerische Tasten und normale Zifferntasten
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode < 31 || (charCode >= 48 && charCode <= 57 ) || (charCode >= 96 && charCode <= 105 ))
return true;
return false;
}
<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
http://www.texotela.co.uk/code/jquery/numeric/numerische Eingabe Credits an Leo Vũ für die Erwähnung dieses und natürlich von TexoTela. mit einer Testseite.
Wenn Sie diesen Code verwenden, können Sie "BackSpace Button" in Mozilla Firefox nicht verwenden. Sie können die Rücktaste nur in Chrome verwenden