Мне нужно убедиться, что определенное поле <input> принимает только числа в качестве значения.
Вход не является частью формы. Следовательно, он не отправляется, поэтому проверка во время подачи не является вариантом. Я хочу, чтобы пользователь не мог вводить символы, отличные от цифр.
Есть ли опрятный способ достичь этого?
Вы можете использовать номер типа ввода HTML5, чтобы ограничить только числовые записи:
<input type="number" name="someid" />
Это будет работать только в браузере жалоб HTML5. Убедитесь, что ваш тип документа html:
<!DOCTYPE html>
См. также https://github.com/jonstipe/number-polyfill для прозрачной поддержки в старых браузерах.
Обновление: Для этого есть новое и очень простое решение:
Он позволяет использовать любой вид фильтра ввода текста
<input>, в том числе различные числовые фильтры. Это будет правильно обрабатывать Копировать + Вставить, Drag + Drop, сочетания клавиш, операции с контекстным меню, не типизируемые клавиши и все раскладки клавиатуры.
Посмотрите этот ответ или попробуйте сами на JSFiddle.
Для общего назначения вы можете пройти проверку JS, как показано ниже:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.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 demo: http://jsfiddle.net/viralpatel/nSjy7/
Вы также можете использовать атрибут pattern в html5:
<input type="text" name="name" pattern="[0-9]" title="Title" />
Хотя, если ваш 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"/>. Это позволит вводить числа только в поле ввода.
Пример: http://jsfiddle.net/SPqY3/
Обратите внимание, что тег type="number" ввода type="number" поддерживается только в новых браузерах.
Для firefox вы можете проверить ввод с помощью javascript:
Обновление 2018-03-12: поддержка браузера намного лучше теперь поддерживается следующим:
<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));
}
или вы можете написать его сложным bu полезным способом:
<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />
Примечание: кросс-браузер и регулярное выражение в литерале.
Я использовал регулярное выражение для замены входного значения требуемым шаблоном.
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">Быстрый и простой код
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />
Это позволит использовать только цифры и backspace.
Если вам нужна десятичная часть, используйте этот фрагмент кода
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
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);" /><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 будет вводить листинг перед проверкой, которая дает некоторую дополнительную проверку (Number.isNaN() этого не делает), Любые значения, отправленные на сервер/сервер, должны быть проверены там!
если вы можете использовать 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 Возможно, вы захотите добавить еще несколько вещей, например, что делать, если строка пустая или пустая и т.д. Также вы можете сделать это быстрее: D
Как насчет использования <input type="number"...>?
http://www.w3schools.com/tags/tag_input.asp
Кроме того, здесь вопрос, который содержит несколько примеров использования Javascript для проверки.
Обновление: связанный с лучшим вопросом (спасибо 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);
});
См. мой проект кросс-браузерного фильтра значения элемента ввода текста на вашей веб-странице с использованием языка JavaScript: Input Key Filter. Вы можете отфильтровать значение как целое число, число с плавающей запятой или написать собственный фильтр, например, фильтр телефонных номеров. См. Пример кода ввода целого числа:
<!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>Принятый ответ:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
Это хорошо, но не идеально. Это работает для меня, но я получаю предупреждение о том, что if-statement можно упростить.
Затем он выглядит следующим образом:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode;
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
Прокомментировал бы оригинальный пост, но моя репутация слишком низкая, чтобы сделать это (только что создал эту учетную запись).
Вы можете использовать тег <input> с атрибутом type = 'number'.
Например, вы можете использовать <input type='number' />
Это поле ввода допускает только числовые значения. Вы также можете указать минимальное значение и максимальное значение, которое должно быть принято этим полем.
Для общего назначения вы можете иметь 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)"/>
Добавьте внутри своего тега ввода: onkeyup = "value = value.replace(/[^\d]/g, '')"
Я добавил несколько ответов, чтобы добавить следующее:
Укажите, сколько чисел после десятичной точки разрешено.
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;
};
Я использую это для Zip-кодов, быстро и просто.
<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
При использовании этого кода вы не можете использовать "BackSpace Button" в Mozilla Firefox, вы можете использовать только backspace в Chrome 47 && event.charCode < 58; "pattern =" [0-9] {5} "required >
http://www.texotela.co.uk/code/jquery/numeric/ числовой ввод Кредитование Leo Vũ для упоминания этого и, конечно, TexoTela. с тестовой страницей.
Лучше добавить "+" к условию REGEX, чтобы принимать несколько цифр (не только одну цифру):
<input type="text" name="your_field" pattern="[0-9]+">