Как сделать так, чтобы тег ввода HTML принимал только числовые значения?

Question 1

Мне нужно убедиться, что <input> поле принимает только числа в качестве значения. Ввод не является частью формы. Следовательно, он не отправляется, поэтому проверка во время отправки не является вариантом. Я хочу, чтобы пользователь не мог вводить какие-либо символы, кроме цифр.

Есть ли способ добиться этого?

Question 2

HTML 5

Ты можешь использовать номер типа ввода HTML5, чтобы ограничить ввод только числа:

<input type="number" name="someid" />

Это будет работать только в браузере жалоб HTML5. Убедитесь, что тип документа вашего html-документа:

<!DOCTYPE html>

Смотрите также https://github.com/jonstipe/number-polyfill для получения информации о прозрачной поддержке в старых браузерах.

JavaScript

Обновить: есть новое и очень простое решение:

Он позволяет использовать любой фильтр ввода для текста <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/

Question 3

Вы также можете использовать атрибут шаблона в html5:

<input type="text" name="name" pattern="[0-9]" title="Title" />

Руководство по проверке ввода

Хотя, если у вас другой тип документа, htmlя думаю, вам нужно использовать некоторый javascript / jquery.

Question 4

Быстрый и простой код

<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)))" />

Question 5

Пожалуйста, попробуйте этот код вместе с самим полем ввода

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

он будет работать нормально.

Question 6

Вы можете использовать <input type="number" />. Это позволит вводить только числа в другое поле ввода.

Пример: http://jsfiddle.net/SPqY3/

Обратите внимание, что type="number"тег ввода поддерживается только в новых браузерах.

Для firefox вы можете проверить ввод с помощью javascript:

http://jsfiddle.net/VmtF5/

Обновление 2018-03-12: поддержка браузеров стала намного лучше, теперь они поддерживаются следующим:

Chrome 6+
Firefox 29+
Opera 10.1+
Safari 5+
Край
(Internet Explorer 10+)

Question 7

Я использовал регулярное выражение, чтобы заменить входное значение нужным шаблоном.

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">

Развернуть фрагмент

Question 8

<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" />

Примечание : кроссбраузерность и регулярное выражение буквально.

Question 9

<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"
>

Наслаждайтесь!

Question 10

Я немного поссорился с этим. Многие решения здесь и в других местах казались сложными. Это решение использует 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 () этого не делает). Любые значения, отправленные на сервер / бэкэнд, все равно должны там проверяться!

Question 11

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/

Question 12

Как насчет использования <input type="number"...>?

http://www.w3schools.com/tags/tag_input.asp

Кроме того, вот вопрос, в котором есть несколько примеров использования Javascript для проверки .

Обновление: связано с лучшим вопросом (спасибо, alexblum).

Question 13

Я использую это для почтовых индексов, быстро и легко.

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>

Question 14

если вы можете использовать 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

Question 15

если не целое, установить 0

<input type="text" id="min-value" />

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });

Question 16

Принятый ответ:

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));
}

Я бы прокомментировал исходный пост, но моя репутация слишком низка для этого (только что создал эту учетную запись).

Question 17

Вы можете использовать <input>тег с атрибутом type = 'number'.

Например, вы можете использовать <input type='number' />

Это поле ввода допускает только числовые значения. Вы также можете указать минимальное и максимальное значения, которые должны приниматься в этом поле.

Question 18

Пожалуйста, посмотрите мой проект кроссбраузерного фильтра значения элемента ввода текста на вашей веб-странице с использованием языка 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>

Развернуть фрагмент

Также см. Мою страницу "Целочисленное поле:" с примером фильтра ввода ключа

Question 19

Для общих целей вы можете выполнить проверку 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)"/>

Question 20

Добавьте внутрь тега ввода: onkeyup = "value = value.replace (/ [^ \ d] / g, '')"

Question 21

Я обновил несколько опубликованных ответов, чтобы добавить следующее:

Добавить метод как метод расширения
Разрешить ввод только одной точки

Укажите, сколько цифр после десятичной точки разрешено.

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;
};

Question 22

При использовании этого кода вы не можете использовать "BackSpace Button" в Mozilla Firefox, вы можете использовать backspace только в Chrome 47 && event.charCode <58; "pattern =" [0-9] {5} "required>

Question 23

http://www.texotela.co.uk/code/jquery/numeric/ выражает благодарность Leo Vũ за упоминание этого и, конечно, TexoTela. с тестовой страницей.

Question 24

Лучше добавить «+» к условию REGEX, чтобы принимать несколько цифр (а не только одну цифру):

<input type="text" name="your_field" pattern="[0-9]+">

Question 25

Один из способов - иметь массив разрешенных кодов символов, а затем использовать Array.includesфункцию, чтобы узнать, разрешен ли введенный символ.

Пример:

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>

Question 26

Достаточно просто?

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});

<input id="inputField" type="text">

Развернуть фрагмент

Answer 1

147

Мне нужно убедиться, что <input> поле принимает только числа в качестве значения. Ввод не является частью формы. Следовательно, он не отправляется, поэтому проверка во время отправки не является вариантом. Я хочу, чтобы пользователь не мог вводить какие-либо символы, кроме цифр.

Есть ли способ добиться этого?

html input numbers validating Чил тен Бринке
источник

stackoverflow.com/questions/469357/…

Alexblum

2

Взгляните на эту [ссылку] [1], где есть достаточно информации. [1]: stackoverflow.com/questions/469357/…

Maheshkumar

Это также может пригодиться: stackoverflow.com/questions/995183/…

Chiel ten Brinke

Возможный дубликат ввода текста HTML допускает только числовой ввод

emkey08

Answer 2

stackoverflow.com/questions/469357/…

Alexblum

Answer 3

2

Взгляните на эту [ссылку] [1], где есть достаточно информации. [1]: stackoverflow.com/questions/469357/…

Maheshkumar

Answer 4

Это также может пригодиться: stackoverflow.com/questions/995183/…

Chiel ten Brinke

Answer 5

Возможный дубликат ввода текста HTML допускает только числовой ввод

emkey08

Answer 6

HTML 5

Ты можешь использовать номер типа ввода HTML5, чтобы ограничить ввод только числа:

<input type="number" name="someid" />

Это будет работать только в браузере жалоб HTML5. Убедитесь, что тип документа вашего html-документа:

<!DOCTYPE html>

Смотрите также https://github.com/jonstipe/number-polyfill для получения информации о прозрачной поддержке в старых браузерах.

JavaScript

Обновить: есть новое и очень простое решение:

Он позволяет использовать любой фильтр ввода для текста <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/

Answer 7

7

Да, у меня это работает как в Firefox, так и в Chrome. Странно, что js нужен для такой простой вещи.

Chiel ten Brinke

Answer 8

7

Не работает в chrome 30. У меня нет проблем с вводом букв в ваш "числовой" ввод на скрипке. Хммм ...

Бен

Answer 9

2

Что, если кто-то захочет ввести значения с плавающей запятой, например 8.9?

syed shah

Answer 10

6

для более надежного решения также подумайте, что копирование и вставка могут добавлять буквы в этот пример!

Нил

Answer 11

3

Ой !! первая строка должна быть изменена на:var charCode = (evt.which) ? evt.which : evt.keyCode;

peiman F.

Answer 12

39

Вы также можете использовать атрибут шаблона в html5:

<input type="text" name="name" pattern="[0-9]" title="Title" />

Руководство по проверке ввода

Хотя, если у вас другой тип документа, htmlя думаю, вам нужно использовать некоторый javascript / jquery.

martincarlin87
источник

4

Хотя firefox выделяет поле ввода красной рамкой, когда вводятся не числа, как в firefox, так и в chrome, вы можете вводить нечисловые символы в поле ввода.

Chiel ten Brinke

какой тип документа вы используете на своей странице?

martincarlin87

хорошо, может быть, он не поддерживается в ваших версиях браузеров? Не уверен на 100%, но, честно говоря, я бы также использовал некоторые js для проверки, я бы сейчас не полагался только на html5

martincarlin87

7

свойство позволяет вводить числа, но не отправлять форму.

My1

1

ПОДАТЬ ТОЛЬКО ВАЛИДАЦИЮ!

Эрик Годонски,

Answer 13

4

Хотя firefox выделяет поле ввода красной рамкой, когда вводятся не числа, как в firefox, так и в chrome, вы можете вводить нечисловые символы в поле ввода.

Chiel ten Brinke

Answer 14

какой тип документа вы используете на своей странице?

martincarlin87

Answer 15

хорошо, может быть, он не поддерживается в ваших версиях браузеров? Не уверен на 100%, но, честно говоря, я бы также использовал некоторые js для проверки, я бы сейчас не полагался только на html5

martincarlin87

Answer 16

7

свойство позволяет вводить числа, но не отправлять форму.

My1

Answer 17

1

ПОДАТЬ ТОЛЬКО ВАЛИДАЦИЮ!

Эрик Годонски,

Answer 18

Быстрый и простой код

<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)))" />

Answer 19

14

Пожалуйста, попробуйте этот код вместе с самим полем ввода

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

он будет работать нормально.

subindas pm
источник

как тогда удалить backspace?

6by3

Answer 20

как тогда удалить backspace?

6by3

Answer 21

7

Вы можете использовать <input type="number" />. Это позволит вводить только числа в другое поле ввода.

Пример: http://jsfiddle.net/SPqY3/

Обратите внимание, что type="number"тег ввода поддерживается только в новых браузерах.

Для firefox вы можете проверить ввод с помощью javascript:

http://jsfiddle.net/VmtF5/

Обновление 2018-03-12: поддержка браузеров стала намного лучше, теперь они поддерживаются следующим:

Chrome 6+
Firefox 29+
Opera 10.1+
Safari 5+
Край
(Internet Explorer 10+)

звездный лучрадуга
источник

1

Кажется, он очень хорошо работает в chrome, но не в firefox.

Chiel ten Brinke

Ах. Это потому, что firefox не поддерживает input type = number. В качестве альтернативы вы можете использовать некоторый javascript для проверки ввода, когда пользователь вводит текст. Ответ обновлен.

starbeamrainbowlabs

Jscript на jsfiddle.net/VmtF5 также не будет работать. Даже если в начале символа стоит 1 цифра, проверка не выполняется. Попробуйте сами на jsfiddle

Акшай,

@aarn У меня работает (см. i.imgur.com/AWdmEov.png ), какой браузер вы используете?

starbeamrainbowlabs

@starbeamrainbowlabs Я использую firefox. Также введите 6abc, он не покажет вам ошибку

Акшай

Answer 22

1

Кажется, он очень хорошо работает в chrome, но не в firefox.

Chiel ten Brinke

Answer 23

Ах. Это потому, что firefox не поддерживает input type = number. В качестве альтернативы вы можете использовать некоторый javascript для проверки ввода, когда пользователь вводит текст. Ответ обновлен.

starbeamrainbowlabs

Answer 24

Jscript на jsfiddle.net/VmtF5 также не будет работать. Даже если в начале символа стоит 1 цифра, проверка не выполняется. Попробуйте сами на jsfiddle

Акшай,

Answer 25

@aarn У меня работает (см. i.imgur.com/AWdmEov.png ), какой браузер вы используете?

starbeamrainbowlabs

Answer 26

@starbeamrainbowlabs Я использую firefox. Также введите 6abc, он не покажет вам ошибку

Акшай

Answer 27

Я использовал регулярное выражение, чтобы заменить входное значение нужным шаблоном.

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">

Развернуть фрагмент

Answer 28

1

Вот почему я люблю регулярные выражения. Спасибо, чувак, ты действительно спас мне день

Нирмал

Answer 29

5

<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" />

Примечание : кроссбраузерность и регулярное выражение буквально.

Фредрик Гаусс
источник

как бы вы добавили возможность ввода типа .5 или .3?

user3591637

Затем вы должны рассмотреть первый и второй символы ( 0.43или .43), которые можно сделать, проверив значение текущего ввода плюс нажатую клавишу. Это было бы некрасиво в однострочном коде, я рекомендую использовать для этого функцию. Чтобы проверить целое число или число с плавающей запятой, проверьте здесь .

Фредрик Гаусс

1

вы не можете удалить ошибочно введенный номер

Крис Сим

Answer 30

как бы вы добавили возможность ввода типа .5 или .3?

user3591637

Answer 31

Затем вы должны рассмотреть первый и второй символы ( 0.43или .43), которые можно сделать, проверив значение текущего ввода плюс нажатую клавишу. Это было бы некрасиво в однострочном коде, я рекомендую использовать для этого функцию. Чтобы проверить целое число или число с плавающей запятой, проверьте здесь .

Фредрик Гаусс

Answer 32

1

вы не можете удалить ошибочно введенный номер

Крис Сим

Answer 33

<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"
>

Наслаждайтесь!

Answer 34

Я немного поссорился с этим. Многие решения здесь и в других местах казались сложными. Это решение использует 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 () этого не делает). Любые значения, отправленные на сервер / бэкэнд, все равно должны там проверяться!

Answer 35

4

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/

Самех Саид
источник

1

Когда вы вставляете значение, содержащее текст, это разрешается

Крис Сим

1

Он также позволяет использовать специальные символы. Например: á, ã, ê, ó, è и т. Д.

Брэд Аренс,

Answer 36

1

Когда вы вставляете значение, содержащее текст, это разрешается

Крис Сим

Answer 37

1

Он также позволяет использовать специальные символы. Например: á, ã, ê, ó, è и т. Д.

Брэд Аренс,

Answer 38

Как насчет использования <input type="number"...>?

http://www.w3schools.com/tags/tag_input.asp

Кроме того, вот вопрос, в котором есть несколько примеров использования Javascript для проверки .

Обновление: связано с лучшим вопросом (спасибо, alexblum).

Answer 39

Я использую это для почтовых индексов, быстро и легко.

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>

Answer 40

если вы можете использовать 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

Answer 41

если не целое, установить 0

<input type="text" id="min-value" />

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });

Answer 42

Принятый ответ:

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));
}

Я бы прокомментировал исходный пост, но моя репутация слишком низка для этого (только что создал эту учетную запись).

Answer 43

Вы можете использовать <input>тег с атрибутом type = 'number'.

Например, вы можете использовать <input type='number' />

Это поле ввода допускает только числовые значения. Вы также можете указать минимальное и максимальное значения, которые должны приниматься в этом поле.

Answer 44

Пожалуйста, посмотрите мой проект кроссбраузерного фильтра значения элемента ввода текста на вашей веб-странице с использованием языка 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>

Развернуть фрагмент

Также см. Мою страницу "Целочисленное поле:" с примером фильтра ввода ключа

Answer 45

Для общих целей вы можете выполнить проверку 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)"/>

Answer 46

2

Добавьте внутрь тега ввода: onkeyup = "value = value.replace (/ [^ \ d] / g, '')"

Навин Кумар
источник

2

Добро пожаловать в SO! К сожалению, это вопрос пяти с половиной лет назад, на который уже есть принятый ответ. Возможно, вы захотите просмотреть здесь вопросы без ответов: stackoverflow.com/unansarded

JoshG 05

Answer 47

2

Добро пожаловать в SO! К сожалению, это вопрос пяти с половиной лет назад, на который уже есть принятый ответ. Возможно, вы захотите просмотреть здесь вопросы без ответов: stackoverflow.com/unansarded

JoshG 05

Answer 48

Я обновил несколько опубликованных ответов, чтобы добавить следующее:

Добавить метод как метод расширения
Разрешить ввод только одной точки

Укажите, сколько цифр после десятичной точки разрешено.

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;
};

Answer 49

При использовании этого кода вы не можете использовать "BackSpace Button" в Mozilla Firefox, вы можете использовать backspace только в Chrome 47 && event.charCode <58; "pattern =" [0-9] {5} "required>

Answer 50

http://www.texotela.co.uk/code/jquery/numeric/ выражает благодарность Leo Vũ за упоминание этого и, конечно, TexoTela. с тестовой страницей.

Answer 51

Лучше добавить «+» к условию REGEX, чтобы принимать несколько цифр (а не только одну цифру):

<input type="text" name="your_field" pattern="[0-9]+">

Answer 52

Один из способов - иметь массив разрешенных кодов символов, а затем использовать Array.includesфункцию, чтобы узнать, разрешен ли введенный символ.

Пример:

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>

Answer 53

Достаточно просто?

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});

<input id="inputField" type="text">

Развернуть фрагмент

Как сделать так, чтобы тег ввода HTML принимал только числовые значения?

Ответы:

HTML 5

JavaScript