Мне нужно убедиться, что <input> поле принимает только числа в качестве значения. Ввод не является частью формы. Следовательно, он не отправляется, поэтому проверка во время отправки не является вариантом. Я хочу, чтобы пользователь не мог вводить какие-либо символы, кроме цифр.
Есть ли способ добиться этого?
Ответы:
Ты можешь использовать номер типа ввода HTML5, чтобы ограничить ввод только числа:
<input type="number" name="someid" />
Это будет работать только в браузере жалоб HTML5. Убедитесь, что тип документа вашего html-документа:
<!DOCTYPE html>
Смотрите также https://github.com/jonstipe/number-polyfill для получения информации о прозрачной поддержке в старых браузерах.
Обновить: есть новое и очень простое решение:
Он позволяет использовать любой фильтр ввода для текста
<input>, включая различные числовые фильтры. Это будет правильно обрабатывать копирование + вставку, перетаскивание + удаление, сочетания клавиш, операции контекстного меню, не вводимые клавиши и все раскладки клавиатуры.
Посмотрите этот ответ или попробуйте сами на 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» следующим образом:
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
Источник: ввод текста HTML допускает только числовой ввод
Демонстрация JSFiddle: http://jsfiddle.net/viralpatel/nSjy7/
var charCode = (evt.which) ? evt.which : evt.keyCode;
Вы также можете использовать атрибут шаблона в html5:
<input type="text" name="name" pattern="[0-9]" title="Title" />
Хотя, если у вас другой тип документа, htmlя думаю, вам нужно использовать некоторый javascript / jquery.
Быстрый и простой код
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />
Это позволит использовать только числа и возврат.
Если вам нужна и десятичная часть, используйте этот фрагмент кода
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
Пожалуйста, попробуйте этот код вместе с самим полем ввода
<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"тег ввода поддерживается только в новых браузерах.
Для firefox вы можете проверить ввод с помощью javascript:
Обновление 2018-03-12: поддержка браузеров стала намного лучше, теперь они поддерживаются следующим:
Я использовал регулярное выражение, чтобы заменить входное значение нужным шаблоном.
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" 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" />
Примечание : кроссбраузерность и регулярное выражение буквально.
0.43или .43), которые можно сделать, проверив значение текущего ввода плюс нажатую клавишу. Это было бы некрасиво в однострочном коде, я рекомендую использовать для этого функцию. Чтобы проверить целое число или число с плавающей запятой, проверьте здесь .
<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" из тега input, чтобы учесть отрицательные числа.
Также это работает для нескольких ящиков (и может сэкономить вам время загрузки, выполняя их индивидуально по идентификатору), просто добавьте класс «validateNumber» там, где это необходимо.
Объяснение
parseInt () в основном делает то, что вам нужно, за исключением того, что возвращает NaN, а не какое-то целочисленное значение. С помощью простого if () вы можете установить «запасное» значение, которое вы предпочитаете во всех случаях, когда возвращается NaN :-). Также W3 заявляет здесь, что глобальная версия NaN будет вводить приведение перед проверкой, что дает дополнительную проверку (Number.isNaN () этого не делает). Любые значения, отправленные на сервер / бэкэнд, все равно должны там проверяться!
function AllowOnlyNumbers(e) {
e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);
return (/^\d+$/.test(str));
}<h1>Integer Textbox</h1>
<input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />JSFiddle: https://jsfiddle.net/ug8pvysc/
Как насчет использования <input type="number"...>?
http://www.w3schools.com/tags/tag_input.asp
Кроме того, вот вопрос, в котором есть несколько примеров использования Javascript для проверки .
Обновление: связано с лучшим вопросом (спасибо, alexblum).
Я использую это для почтовых индексов, быстро и легко.
<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
если вы можете использовать HTML5, вы можете это сделать. <input type="number" />
Если нет, вам придется либо делать это через javascript, как вы сказали, он не отправляется для этого из кода.
<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 не проверял код, но он должен быть более или менее правильным, если не проверять опечатки: D Вы можете добавить еще несколько вещей, например, что делать, если строка пустая или пустая и т. Д. Также вы можете сделать это быстрее: D
Принятый ответ:
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>Также см. Мою страницу "Целочисленное поле:" с примером фильтра ввода ключа
Для общих целей вы можете выполнить проверку 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;
};
При использовании этого кода вы не можете использовать "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]+">
Достаточно просто?
inputField.addEventListener('input', function () {
if ((inputField.value/inputField.value) !== 1) {
console.log("Please enter a number");
}
});<input id="inputField" type="text">