Як змусити HTML-тег введення приймати лише числові значення?

143

Мені потрібно переконатися, що певне <input>поле приймає лише значення як значення. Введення не є частиною форми. Отже, він не надходить, тому перевірка під час подання не є варіантом. Я хочу, щоб користувач не міг вводити будь-які символи, крім цифр.

Чи є акуратний спосіб цього досягти?

html  input  numbers  validating 
— Кіль десять Брінк
джерело
— alexblum
2
Погляньте на це [посилання] [1], де достатньо інформації. [1]: stackoverflow.com/questions/469357 / ...
— Maheshkumar
Це одна може стати в нагоді: stackoverflow.com/questions/995183 / ...
— Chiel десять Brinke
— emkey08

Відповіді:

282

HTML 5

Ви можете використовувати номер типу введення HTML5, щоб обмежити лише записи номерів:

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

Це працюватиме лише в браузері скарг HTML5. Переконайтеся, що тип вашого документа html:

<!DOCTYPE html>

Дивіться також https://github.com/jonstipe/number-polyfill для прозорої підтримки у старих браузерах.

JavaScript

Оновлення: для цього є нове і дуже просте рішення:

Це дозволяє використовувати будь- який фільтр введення тексту <input>, включаючи різні числові фільтри. Це правильно обробляє Copy + Paste, 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: http://jsfiddle.net/viralpatel/nSjy7/

— Вірусний патель
джерело
6
Так, це працює для мене як у firefox, так і в хромі. Дивно, що js необхідний для такої простої речі.
— Chiel ten Brinke
7
Не працює в хромі 30. У мене взагалі не виникає проблем із введенням літер у ваше число «цифра» у скрипці. Гммм ...
— Бен
2
Що робити, якщо хтось хоче ввести знаки з плаваючою ланкою, наприклад 8,9?
— syed shah
6
для більш надійного рішення також врахуйте копіювати та вставити, щоб додати приклад до цього прикладу!
— Ніл
3
На жаль !! перший рядок повинен змінитись на:var charCode = (evt.which) ? evt.which : evt.keyCode;
— peiman F.
33

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

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

Підручник з перевірки введення

Хоча, якщо ваш doctype не такий, htmlя думаю, вам потрібно буде використовувати javascript / jquery.

— martincarlin87
джерело
3
Незважаючи на те, що firefox дає поле введення червоною рамкою, коли вводяться не цифри, як у firefox, так і в chrome, ви можете вводити символи без числа у поле введення.
— Chiel ten Brinke
який тип ви використовуєте на своїй сторінці?
— martincarlin87
ок, можливо, він не підтримується у ваших версіях браузера? Не на 100% впевнений, але, якщо чесно, я використав би js для перевірки aswell, я б не покладався тільки на html5 на даний момент
— martincarlin87
7
властивість дозволяє вводити номери, але не надсилати форму.
— My1
1
ПОДІЙТЕ ВАЛИДАЦІЮ ТОЛЬКО!
— Ерік Ходонський
16

Швидкий і простий код

<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)))" />
— abhijithvijayan
джерело
13

Спробуйте цей код разом із самим полем введення

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

це буде добре працювати.

— субінди вечора
джерело
як потім видалити резервну область?
— 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+
  • Сафарі 5+
  • Край
  • (Internet Explorer 10+)
— starbeamrainbowlabs
джерело
1
Здається, це дуже добре працює в хромі, але не у firefox.
— Chiel ten Brinke
Ага. Це тому, що firefox не підтримує тип вводу = число. Крім того, ви можете використовувати трохи javascript для перевірки введення, коли користувач вводить текст. Відповідь оновлено.
— starbeamrainbowlabs
Jscript на jsfiddle.net/VmtF5 , також не працюватиме. Навіть якщо 1 цифра знаходиться на початку символу, перевірка завершується невдаче. Спробуйте самі по jsfiddle
— Акшай
@aarn Це працює для мене (див. i.imgur.com/AWdmEov.png ), який браузер ви використовуєте?
— starbeamrainbowlabs
@starbeamrainbowlabs Я використовую firefox. Крім того, введіть 6abc, це не покаже вам помилку
— Акшай
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?
— користувач3591637
Тоді вам слід врахувати перший та другий символи ( 0.43або .43), які можна було б виконати при перевірці значення поточного введення плюс натиснута клавіша. Це буде некрасиво в однорядковому коді, я рекомендую використовувати для цього функцію. Щоб перевірити ціле чи плаваюче, перевірте тут .
— Фредрік Гаус
1
ви не можете видалити номер, введений помилково
— Кріс Сім,
5

Я використовував регулярний вираз для заміни вхідного значення потрібним шаблоном.

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
Тому я люблю регекс. Дякую, чоловіче, ти справді врятував мені день
— Нірмал
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"
>

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

— user40521
джерело
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" з вхідного тегу, щоб дозволити негативні числа.

Крім того, це працює для декількох ящиків (і може заощадити певний час завантаження, виконуючи їх окремо за id), просто додайте клас "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

якщо ви можете використовувати 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

— czioutas
джерело
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);
            });
— websky
джерело
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)"/>
— YasirPoongadan
джерело
2

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

— Naveen Kumar
джерело
2
Ласкаво просимо до SO! На жаль, це 5-річне запитання, на яке вже є прийнята відповідь. Ви можете переглянути питання без відповідей тут: stackoverflow.com/unanswered
— AndroidNoobie
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

Я використовую це для поштових індексів, швидко і просто.

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
— Джастін Бусер
джерело
1

Під час використання цього коду ви не можете використовувати "BackSpace Button" у Mozilla Firefox, ви можете використовувати backspace лише в Chrome 47 && event.charCode <58; "pattern =" [0-9] {5} "обов'язково>

— Венделл Альварес
джерело
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);"/>
— MA1
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.