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


147

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

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



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

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

Ответы:


286

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/


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

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

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

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

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

39

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

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

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

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


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

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

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

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

1
ПОДАТЬ ТОЛЬКО ВАЛИДАЦИЮ!
Эрик Годонски,

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

14

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

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

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


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

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, он не покажет вам ошибку
Акшай

6

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

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


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

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
вы не можете удалить ошибочно введенный номер
Крис Сим

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

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


4

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


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
Он также позволяет использовать специальные символы. Например: á, ã, ê, ó, è и т. Д.
Брэд Аренс,


3

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

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

3

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


2

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

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

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

2

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

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

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


2

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

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

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


2

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

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


2

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

2

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


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

2

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

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

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

1

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



0

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

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


0

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

Пример:

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

0

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.