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

253

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

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

Хорошо, ребята, я ценю ваше время и помощь, но я вижу много незаслуженного голосования: D. Установка шага в 1 не является ответом, поскольку он не ограничивает ввод. Вы все еще можете ввести отрицательное число с плавающей точкой в текстовое поле. Кроме того, я знаю о проверке шаблонов (я упоминал об этом в моем первоначальном сообщении), но это не было частью вопроса. Я хотел знать, позволяет ли HTML5 ограничивать ввод типа «число» положительными целочисленными значениями. Похоже, что на этот вопрос ответ будет «нет, это не так». Я не хотел использовать валидацию шаблонов, потому что это вызывает некоторые недостатки при использовании валидации 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

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

— удить митталь
источник

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
источник

0

<input type="number" oninput="this.value = Math.round(this.value);"/>

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

— Р. Ягхуби
источник

-2

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

— Уэстон
источник

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

— vsync