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

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

ИЗМЕНИТЬ

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

Ответ 1

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

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

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

Ответ 2

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

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

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

Ответ 11

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

Ответ 12

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

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

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

        return true;
});

Ответ 13

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

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

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

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

Ответ 14

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

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

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

Ответ 15

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

Ответ 16

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

Ответ 17

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

Ответ 18

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

Ответ 19

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

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

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

Ответ 20

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