Как сделать входной тег HTML только принимать числовые значения?
Мне нужно убедиться, что определенный <input> поле принимает только цифры в качестве значения.
Входные данные не являются частью формы. Следовательно, он не отправляется, поэтому проверка во время отправки не является опцией. Я хочу, чтобы пользователь не мог вводить какие-либо символы, кроме чисел.
есть ли аккуратный способ достичь этого?
21 ответов
можно использовать номер входного типа HTML5 ограничить только количество записей:
<input type="number" name="someid" />
это будет работать только в браузере жалоб HTML5. Убедитесь, что тип документа html:
<!DOCTYPE html>
см. также https://github.com/jonstipe/number-polyfill для прозрачной поддержки в старых браузерах.
для общего назначения вы можете иметь проверку JS, как показано ниже:
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)"/>
если вы хотите разрешить десятичные дроби заменить" если условие " следующим:
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
источник: HTML ввод текста позволяет только числовой ввод
JSFiddle демо: http://jsfiddle.net/viralpatel/nSjy7/
вы также можете использовать атрибут pattern в html5:
<input type="text" name="name" pattern="[0-9]" title="Title" />
http://www.pageresource.com/html5/input-validation-tutorial/
хотя, если ваш doctype не html тогда, я думаю, вам нужно будет использовать javascript/jquery.
пожалуйста, попробуйте этот код вместе с самим полем ввода
<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>
он будет работать нормально.
можно использовать <input type="number" />. Это позволит вводить только номера в поле ввода othe.
пример:http://jsfiddle.net/SPqY3/
обратите внимание, что вход type="number" тег поддерживается только в новых браузерах.
для firefox вы можете проверить ввод с помощью javascript:
обновление 2018-03-12: поддержка браузера намного лучше, теперь это поддерживается следующим:
- Chrome 6+
- Firefox 29+
- Opera 10.1+
- Safari 5+
- Edge
- (Internet Explorer 10+)
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 : "#" & "$" & "%"
else if (e.shiftKey && (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);" /><input
onkeyup="value=isNaN(parseFloat(value))?1000:value"
type="number"
value="1000"
>
onkeyup триггеры, когда ключ отпущен.
isNaN(parseFloat(value))? проверяет, не является ли входное значение числом.
если это не число, значение равно 1000 : если это число, значение устанавливается в значение.
Примечание: по какой-то причине он работает только с type="number"
чтобы сделать его еще более увлекательным, вы также можете иметь границы:
<input
onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
type="number"
value="1000"
>
наслаждайтесь!
Я боролся с этим немного. Многие решения здесь и в других местах казались сложными. Это решение использует jQuery / javascript наряду с 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);
});
в моем случае я отслеживал небольшие количества с минимальным значением 1, следовательно, min= " 1 " во входном теге и abc = 1 в проверке isNaN (). Для положительных только чисел вы можете изменить эти значения на 0 и даже просто удалить min="1" из тега ввода, чтобы разрешить отрицательные числа.
также это работает для нескольких ящиков (и может сэкономить вам время загрузки по отдельности по id), просто добавьте класс "validateNumber", где это необходимо.
объяснение
parseInt () в основном делает то, что вам нужно, за исключением того, что он возвращает NaN, а не некоторое целое значение. С помощью простого if () вы можете установить значение "резервный", которое вы предпочитаете во всех случаях NaN возвращается: -). Также W3 состояния здесь что глобальная версия NaN будет вводить литье перед проверкой, которая дает некоторые дополнительные проверки (номер.isNaN() этого не делает). Любые значения, отправленные на сервер / сервер, должны быть проверены там!
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />
и в js:
function isNumber(e){
e = e || window.event;
var charCode = e.which ? e.which : e.keyCode;
return /\d/.test(String.fromCharCode(charCode));
}
или вы можете написать его в сложную бу удобным способом:
<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />
Примечание: кросс-браузер и регулярное выражение в литерале.
Если вы можете использовать HTML5, вы можете сделать <input type="number" />
Если нет, вам придется либо сделать это через javascript, как вы сказали, он не будет отправлен, чтобы сделать это из codebehind.
<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;
}
P. S не тестировал код, но он должен быть более или менее правильным, если не проверять опечатки: D Вы можете добавить еще несколько вещей, например, что делать, если строка равна null или пуста и т. д. Также вы можете сделать это быстрее: D
Как насчет использования <input type="number"...>?
http://www.w3schools.com/tags/tag_input.asp
кроме того, здесь вопрос, который имеет некоторые примеры использования Javascript для проверки.
Update: связан с лучшим вопросом (спасибо alexblum).
если не целое число 0
<input type="text" id="min-value" />
$('#min-value').change(function ()
{
var checkvalue = $('#min-value').val();
if (checkvalue != parseInt(checkvalue))
$('#min-value').val(0);
});
принято отвечать:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
это хорошо, но не идеально. Это работает для меня, но я получаю предупреждение о том, что оператор if может быть упрощен.
тогда это выглядит так, что красивше:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode;
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
прокомментировал бы исходное сообщение, но моя репутация слишком низкая, чтобы сделать это (просто создал эту учетную запись).
можно использовать <input> тег с атрибутом type= 'number'.
например, вы можете использовать <input type='number' />
это поле ввода допускает только числовые значения. Можно также указать минимальное и максимальное значения, которые должны быть приняты в этом поле.
см. мой проект кросс-браузерного фильтра значения элемента ввода текста на вашей веб-странице с использованием языка JavaScript: Входной Ключевой Фильтр . Можно отфильтровать значение как целое число, число с плавающей запятой или написать пользовательский фильтр, например фильтр номера телефона. См. пример кода ввода целого числа:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Input Key Filter Test</title>
<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
<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>Также см. мою страницу "целочисленное поле:" примера фильтра входных ключей
Я использую это для почтовых индексов, быстро и легко.
<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
при использовании этого кода Вы не можете использовать "кнопку BackSpace" в Mozilla Firefox вы можете использовать только backspace в Chrome 47 & & event.charCode
http://www.texotela.co.uk/code/jquery/numeric/ цифровой ввод кредиты Leo Vũ за упоминание этого и, конечно, TexoTela. с тестовой страницей.
для общего назначения вы можете иметь проверку JS, как показано ниже:
он будет работать для цифровой клавиатуры и обычной цифровой клавиши
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)"/>
я использовал регулярное выражение для замены входного значения требуемым шаблоном.
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">лучше добавить " + " в условие REGEX, чтобы принять несколько цифр (а не только одну цифру):
<input type="text" name="your_field" pattern="[0-9]+">