HTML5: тип ввода чисел, который принимает только целые числа?

Question

HTML5: тип ввода чисел, который принимает только целые числа?

205

Я использую jQuery Tools Validator, который реализует проверки HTML5 через jQuery. До сих пор он работал отлично, за исключением одного. В спецификации HTML5 тип ввода "число" может иметь как целые числа, так и числа с плавающей запятой. Это кажется невероятно близоруким, поскольку это будет только полезный валидатор, когда ваши поля базы данных будут подписаны с номерами с плавающей запятой (для неподписанных ints вам придется вернуться к проверке "шаблонов" и, следовательно, потерять дополнительные функции, такие как стрелки вверх и вниз для браузеров, которые его поддерживают). Есть ли другой тип ввода или, возможно, атрибут, который ограничивает ввод только целыми без знака? Я не мог найти, спасибо.

ИЗМЕНИТЬ

Хорошо, ребята, я ценю ваше время и помощь, но я вижу много незаслуженных голосований: D. Установка шага в 1 не является ответом, поскольку он не ограничивает ввод. Вы все равно можете ввести отрицательный номер с плавающей запятой в текстовое поле. Кроме того, мне известно о проверке шаблонов (я упомянул об этом в своем оригинальном посте), но это не было частью вопроса. Я хотел знать, допускает ли HTML5 ограничение ввода типа "число" на положительные целочисленные значения. На этот вопрос ответ, похоже, будет "нет, это не так". Я не хотел использовать проверку шаблонов, потому что это вызывает некоторые недостатки при использовании проверки JQuery Tools, но теперь кажется, что спецификация не позволяет более чистый способ сделать это.

JayPea 10 янв. 2012, в 19:18

Источник

0

По состоянию на 2019 год - с тех пор я не знаю - ввод number (по крайней мере, в FF / Chrome / Safari) теперь принимает по умолчанию только целые числа, если только вы не установили явное значение для атрибута step которое допускает десятичные значения; например: step="0.01" . Документированный MDN здесь . У меня две мысли об этом, потому что я думаю, что это разумное значение по умолчанию, но также и серьезное изменение (да, это повлияло на некоторый код, который я написал).
Darragh Enright 29 янв. 2019, в 19:37

Теги:

jquery

html5

validation

jquery-tools

20 ответов

Ещё вопросы

По состоянию на 2019 год - с тех пор я не знаю - ввод number (по крайней мере, в FF / Chrome / Safari) теперь принимает по умолчанию только целые числа, если только вы не установили явное значение для атрибута step которое допускает десятичные значения; например: step="0.01" . Документированный MDN здесь . У меня две мысли об этом, потому что я думаю, что это разумное значение по умолчанию, но также и серьезное изменение (да, это повлияло на некоторый код, который я написал).

Aurélien Ooms · Answer 1 · 2013-06-20T08-27-00.000Z

273

https://www.w3.org/wiki/HTML/Elements/input/number

Лучшее, что вы можете достичь только с помощью HTML

    <input type="number" min="0" step="1"/>

Aurélien Ooms 20 июнь 2013, в 08:27

6

Вы, вероятно, должны установить min в 1 как он хочет положительные числа (а не неотрицательные числа).
Martin Thoma 15 май 2014, в 20:20
1

@pwdst Я буду вторым. <input type="number" min="0" step="1"/> - самый правильный ответ на вопрос. В любом случае, какой смысл иметь оба step="1" и pattern="\d+" ? Я не могу набирать числа с плавающей запятой в обоих случаях.
Danish Ashfaq 26 авг. 2014, в 12:43
0

@pwdst @DanishAshfaq Если этот атрибут шаблона не указан в спецификации для type="number" тогда этот ответ неверен. В любом случае, похоже, что стандарт <input type="number" min="0" step="1"> работает лучше, чем раньше в Chrome и Firefox. Должен ли я удалить шаблон вещь?
Aurélien Ooms 26 авг. 2014, в 13:54
0

Я протестировал его в Chrome и Firefox, и в атрибуте pattern нет необходимости. В Chrome, не используя атрибут pattern, если я наберу «4.23», он даже дает мне подсказку: «Пожалуйста, введите правильное значение. Ближайшими являются 4 и 5.» Но при использовании атрибута pattern он просто говорит «Пожалуйста, введите правильное значение». Я думаю, вы могли бы обновить свой ответ :)
Danish Ashfaq 28 авг. 2014, в 09:21
17

Это не сработало для меня на последней версии Chrome. Он не позволяет вводить буквы, но позволяет вставлять специальные символы.
Malavos 21 фев. 2015, в 21:39
0

Что такое step = "1"?
ShibinRagh 29 апр. 2016, в 07:15
1

@ShibinRagh w3.org/TR/2012/WD-html5-20121025 / ...
Aurélien Ooms 30 апр. 2016, в 15:05
0

здесь можно ввести "," & "."
Никита Середа 28 апр. 2018, в 05:56
0

Почему я могу ввести е в
grant sun 13 дек. 2018, в 19:02
0

@grantsun для экспоненциальных чисел, например, 10e20.
sn3ll 19 янв. 2019, в 23:09

Показать ещё 8 комментариев

js-coder · Answer 2 · 2012-01-10T20-06-00.000Z

137

Установите для атрибута step значение 1:

<input type="number" step="1" />

В настоящее время это похоже на ошибку в Chrome, так что это может быть не лучшее решение на данный момент.

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

<input type="text" pattern="\d*" />

\d является регулярным выражением для числа, * означает, что он принимает более одного из них. Вот демо: http://jsfiddle.net/b8NrE/1/

js-coder 10 янв. 2012, в 20:06

2

Как выяснил JayPea, еще не все браузеры поддерживают все элементы HTML5, поэтому, как вы и предлагали, лучше всего обеспечить изящное унижение.
DOK 10 янв. 2012, в 18:54
1

На Chrome 18, работающем под управлением Ubuntu, приведенная выше скрипка не работает. Атрибут числа делает, однако.
Zut 18 май 2012, в 09:34
1

@Zut работает на меня. (Chrome 18 и Ubuntu.) Вы действительно что-то вводили во вход? Используйте <input type="text" pattern="\d+" required /> если вы не хотите принимать пустой ввод.
js-coder 18 май 2012, в 10:17
0

Исправление: я использую Chromium, а не Chrome. Я не думаю, что это должно что-то изменить, хотя. Я могу ввести любой произвольный символ в поле ввода. Я только что проверил дважды, и теперь успешно набрал "asdf123, .-".
Zut 19 июль 2012, в 18:11
4

@Zut Проверка HTML5 не мешает вам ввести эти ключи. Это просто предотвращает отправку формы с этими символами. Если вы отправите форму с вводом number типа, содержащего другие символы, Chrome покажет вам сообщение об ошибке.
js-coder 19 июль 2012, в 18:42
2

@dotweb - Я понимаю вашу точку зрения. Разница между ними заключается в том, что при использовании атрибута number все буквенные символы автоматически удаляются, когда я отменяю выбор (вызывает размытие) для ввода. Это не происходит при использовании атрибута pattern. Я полагаю, что это различие важно только в том случае, если вы используете AJAX для публикации своих данных, и вы используете какое-то другое событие, кроме submit чтобы инициировать публикацию.
Zut 20 июль 2012, в 06:57
1

Как это предотвращает ввод отрицательных чисел? Разве «целые числа без знака» не означают никаких негативов?
user3285954 24 янв. 2015, в 14:44
0

Вы можете объединить два: <input type = "number" min = "0" pattern = "\ d *" />
Leths 01 июль 2015, в 12:35
0

если я использую шаблон как pattern = "\ d {3,4}", а затем хочу ограничить пользователя минимальным значением 500 и максимальным значением 1500, что делать?
Imran Qamer 15 дек. 2015, в 06:34
0

Чтобы разрешить отрицательные числа, используйте шаблон как -?\d*
mindplay.dk 18 апр. 2016, в 13:51
0

Его все еще глючит в хром
SuperUberDuper 30 окт. 2017, в 16:48
1

Это не делает то, что спросил OP. Только целые числа /\d*/.test(1.1) // true
vsync 11 июль 2018, в 10:27

Показать ещё 10 комментариев

Tarek Kalaji · Answer 3 · 2015-05-18T12-28-00.000Z

28

Простой способ использования JavaScript:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >

Tarek Kalaji 18 май 2015, в 12:28

0

Я не понимаю, replace(/(\..*)\./g, '$1')
codyc4321 28 янв. 2017, в 14:33
3

Это важно, чтобы принять числа с плавающей запятой и повторить . только один раз, например, 123.556 может быть записано.
Tarek Kalaji 28 янв. 2017, в 15:54
3

@TarekKalaji - задает целые числа, а не числа с плавающей запятой
vsync 11 июль 2018, в 10:29
0

как насчет мобильного устройства? потому что наберите текст отображать все клавиатуры (буквенно-цифровые символы также)
Nuri YILMAZ 05 авг. 2018, в 22:12

Показать ещё 2 комментария

thejustv · Answer 4 · 2014-05-03T12-13-00.000Z

22

<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

Используя этот код, вход в текстовое ограничение feild вводит только цифры.... Шаблон - это новый атрибут, доступный в HTML5

Дополнение к атрибуту Patter

thejustv 03 май 2014, в 12:13

0

developer.mozilla.org/en-US/docs/Web/HTML/Element/...
iambriansreed 21 май 2014, в 22:10
5

В соответствии со спецификацией атрибут шаблона может использоваться только в том случае, если тип ввода - «Текст», «Поиск», «URL», «Телефон», «Электронная почта», «Пароль» (как показано здесь с типом «Текст»). Это означает, что при использовании этого метода теряется семантика типа ввода номера и, следовательно (что важно) числовых экранных клавиатур некоторых планшетов и телефонов.
pwdst 27 июнь 2014, в 14:00
1

Это в Firefox 36.0 позволяет вводить буквы и специальные символы.
Malavos 27 фев. 2015, в 16:16

Показать ещё 1 комментарий

karthick · Answer 5 · 2014-05-03T12-29-00.000Z

13

Это не только для html5, все браузер работает нормально. попробуйте это

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"

karthick 03 май 2014, в 12:29

11

Это плохо. На входе попробуйте: Shift + Home, Shift + End, Ctrl + A, Ctrl + C, Ctrl + V. oninput этого используйте oninput
zanderwar 10 май 2016, в 01:30
0

Когда этот ответ был написан, HTML5 не был опубликован. @zanderwar
Muhammet Can TONBUL 19 янв. 2018, в 09:10
0

это не работает, когда пользователь вставляет из буфера обмена.
Nuri YILMAZ 05 авг. 2018, в 22:11

Показать ещё 1 комментарий

Viktor Karpyuk · Answer 6 · 2016-11-24T18-19-00.000Z

Образец хорош, но если вы хотите ограничить ввод номерами только с помощью type = "text", вы можете использовать oninput и regex, как показано ниже:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

Я боюсь за меня:)

Noothan y v · Answer 7 · 2017-03-01T20-27-00.000Z

Шаблон всегда предпочтительнее для ограничения, попробуйте oninput и min выполнить 1 для ввода только чисел от 1 до

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >

Это очень интересное решение. Что для `value = $ {var}` есть?
@AcademyofProgrammer пример значения по умолчанию для этого ввода

DevTeamExpress · Answer 8 · 2012-01-10T19-51-00.000Z

попробовал ли вы установить атрибут step на 1, как этот

<input type="number" step="1" />

wilsonfoz · Answer 9 · 2012-05-24T20-32-00.000Z

Да, HTML5 делает. Попробуйте этот код (w3school):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

См. минимальный и максимальный пареметр? Я попробовал его с помощью Chrome 19 (работал) и Firefox 12 (не работал).

Это предполагает, что вы хотите известный диапазон. Но если вы хотите любое целое значение, будет это все еще работает?

a.valchev · Answer 10 · 2017-04-11T13-34-00.000Z

Я работал в Chrome и имел некоторые проблемы, хотя я использовал атрибуты html. Я закончил с этим js-кодом

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});

Я закончил тем, что использовал это также с 1 незначительной настройкой; Я изменил parseInt (значение) на parseInt (value.replace ('.', ''). Это позволило мне вставить 1,56 и сохранить отображаемое значение на уровне 156 вместо 1.

udit mittal · Answer 11 · 2013-03-30T21-34-00.000Z

Установите step="any". Работает отлично. Ссылка: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

Luca Fagioli · Answer 12 · 2018-08-05T18-51-00.000Z

Возможно, это не подходит для каждого случая использования, но

<input type="range" min="0" max="10" />

может сделать прекрасную работу: скрипка.

Проверьте документацию.

illeas · Answer 13 · 2017-03-10T06-28-00.000Z

Просто поместите его в поле ввода: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

Sarthak · Answer 14 · 2016-01-18T09-03-00.000Z

var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});

Mantas K. · Answer 15 · 2012-11-04T15-42-00.000Z

Установите атрибут step для любого числа с плавающей точкой, например. 0,01, и вам хорошо идти.

David Hedlund · Answer 16 · 2012-01-10T20-33-00.000Z

Из спецификаций

step="any" или положительный номер с плавающей запятой
Задает значение детализации значения элементов.

Итак, вы можете просто установить его на 1:

Я пробовал это, но проблема в том, что вы все еще можете ввести число с плавающей запятой в текстовом поле.
Итак, вам нужен код, который блокирует пользователя от ввода десятичной точки?

Michal · Answer 17 · 2018-12-04T14-32-00.000Z

В настоящее время невозможно предотвратить ввод пользователем десятичных значений в ваш ввод только с помощью HTML. Вы должны использовать javascript.

Nikolay_R · Answer 18 · 2018-11-09T09-54-00.000Z

 <input type="number" min="0" step="1" pattern="\d+"/>

Robbie Averill · Answer 19 · 2013-10-03T05-28-00.000Z

Кстати, кажется, что если у вас есть что-то другое, кроме числа в входе "число", val() и т.д. возвращает "". Я только что поставил чек и, похоже, работал на то, что мне нужно (ограничение буквы и других символов).

if( var == '' ) {
    alert( 'Var is not a number' );
}

Работает с ведущими нулями, десятичными точками и т.д.

weston · Answer 20 · 2012-08-28T19-35-00.000Z

В Future (см. Раздел "Могу ли я использовать") на пользовательских агентах, которые представляют вам клавиатуру, вы можете ограничить ввод текста только числовым с помощью input[inputmode].

inputmode предназначен в основном для портативных устройств и будет вызывать правильную раскладку клавиатуры, но для «обычных» компьютеров с клавиатурой он не помешает вводить то, что вы хотите.
Вы правы @vsync, я обновил свой ответ.