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

253

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

РЕДАКТИРОВАТЬ

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

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

Ответы:

326

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

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

<input type="number" min="0" step="1"/>
Развернуть фрагмент

Орельен Оомс
источник
6
Вы , вероятно , следует установить , minчтобы , 1как он хочет положительные числа (а не неотрицательные числа).
Мартин Тома,
1
@pwdst Я буду вторым. <input type="number" min="0" step="1"/>самый правильный ответ на вопрос. Во всяком случае, какой смысл иметь и то step="1"и другое pattern="\d+"? Я не могу набирать числа с плавающей запятой в обоих случаях.
датский ашфак
27
Это не сработало для меня на последней версии Chrome. Он не позволяет вводить буквы, но позволяет вставлять специальные символы.
Малавос
3
Почему я могу набрать е
предоставить солнце
4
@grantsun для экспоненциальных чисел, например, 10e20.
sn3ll
181

Установите stepатрибут на 1:

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

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

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

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

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

JS-верстальщик
источник
2
Как выяснил JayPea, еще не все браузеры поддерживают все элементы HTML5, поэтому, как вы и предлагали, лучше всего обеспечить изящное унижение.
DOK
6
@Zut Проверка HTML5 не мешает вам ввести эти ключи. Это просто предотвращает отправку формы с этими символами. Если вы отправите форму с вводом типа number, содержащего другие символы, Chrome покажет вам сообщение об ошибке.
JS-кодер
2
@dotweb - Я понимаю вашу точку зрения. Разница между ними заключается в том, что при использовании атрибута number все буквенные символы автоматически удаляются, когда я отменяю выбор (вызывает размытие) для ввода. Это не происходит при использовании атрибута pattern. Я полагаю, что это различие важно только в том случае, если вы используете AJAX для публикации своих данных, и вы используете какое-то другое событие, помимо submitзапуска публикации.
Зут
6
Это не делает то, что спросил OP. Только целые числа /\d*/.test(1.1) // true
vsync
2
@vsync pattern="\d*"- это не то же самое /\d*/, pattern="\d*"что /^(?:\d*)$/, пожалуйста, обратитесь к документации по атрибутам шаблона HTML5 .
Виктор Стрибьев
37 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

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

Шаблон атрибута документа

thejustv
источник
9
Согласно спецификации атрибут шаблон может быть использован только тогда, когда тип ввода текста, поиска, URL, телефон, электронная почта, пароль (как показано здесь с типом «Текст»). Это означает, что семантика типа ввода номера и, следовательно, (что важно) числовой экранной клавиатуры некоторых планшетов и телефонов теряется при использовании этого метода.
pwdst
3
Это в Firefox 36.0 позволяет вводить буквы и специальные символы.
Малавос
1
Он не ограничивает ввод только цифрами, вы все равно можете печатать буквы!
HadidAli
35

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

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
Тарек Каладжи
источник
Я не понимаюreplace(/(\..*)\./g, '$1')
codyc4321
3
Это важно, чтобы принимать числа с плавающей запятой и повторять .только один раз, например, 123.556можно записать.
Тарек Каладжи
8
@TarekKalaji - целые числа вопросов, а не числа с плавающей запятой
vsync
как насчет мобильного устройства? потому что при наборе текста отображаются все клавиатуры (также буквенно-цифровые символы)
Nuri YILMAZ
27

Шаблон хорош, но если вы хотите ограничить ввод только числами с type = "text", вы можете использовать oninput и регулярное выражение, как показано ниже:

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

Я лажу за меня :)

Виктор Карпюк
источник
Помните, что этот подход может свести на нет ваш (изменить) метод (обработчик события), а также стереть ваше значение по умолчанию в поле ввода.
HadidAli
14

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

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
леопард
источник
12
Это плохо. На входе попробуйте: Shift + Home, Shift + End, Ctrl + A, Ctrl + C, Ctrl + V. Используйте oninputвместо этого
zanderwar
1
Когда этот ответ был написан, HTML5 не был опубликован. @zanderwar
Мухаммет
11

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

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
Нотан Ю.В.
источник
Это очень интересное решение. Что для `value = $ {var}` есть?
Разработчик
@AcademyofProgrammer пример значения по умолчанию для этого ввода
Shinigamae
лучший ответ! работает для вставки, работает даже в IE (10+), дает вам свободу отображать любую клавиатуру через тип входа и не заставляет хром отображать эти надоедливые стрелки вверх / вниз внутри поля.
Janosch
6

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

<input type="number" step="1" />
DevTeamExpress
источник
4

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

illeas
источник
4

Может быть, это не подходит для каждого варианта использования, но

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

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

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

Люка Фагиоли
источник
3

Да, 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 (не работал).

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

Я работал на Chrome и у меня были некоторые проблемы, хотя я использую атрибуты HTML. Я закончил с этим кодом JS

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

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

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

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

Мантас К.
источник
2

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

step="any"или положительное число с плавающей точкой
Указывает гранулярность значения элемента.

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

Дэвид Хедлунд
источник
9
Я пробовал это, но проблема в том, что вы все еще можете ввести число с плавающей запятой в текстовом поле.
JayPea
Итак, вам нужен код, который блокирует пользователя от ввода десятичной точки?
Blazemonger
1 
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's 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);
    }
});
Sarthak
источник
0

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

Michal
источник
-2

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

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