HTML5: тип введення числа, який приймає лише цілі числа?

252

Я використовую інструмент перевірки інструментів jQuery, який реалізує перевірку HTML5 через jQuery. Поки що це чудово працює, крім однієї речі. У специфікації HTML5 тип вводу "число" може мати як цілі числа, так і числа з плаваючою комою. Це здається неймовірно недалекоглядним, оскільки він буде корисним валідатором лише тоді, коли поля вашої бази даних будуть підписані цифрами з плаваючою комою (для неподписаних вкладок вам доведеться повернутися до перевірки "шаблону" і, таким чином, втратити додаткові функції, такі як вгору і вниз стрілки для веб-переглядачів, які його підтримують). Чи є інший тип введення або, можливо, атрибут, який обмежував би вхід лише непідписаними цілими числами? Я не міг знайти жодного, дякую.

EDIT

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

— JayPea
джерело

3

Станом на 2019 рік - я не знаю, коли - numberвхід (у FF / Chrome / Safari принаймні) тепер приймає лише цілі числа за замовчуванням, якщо ви не встановите явне значення для stepattr, що дозволяє десяткові значення; наприклад: step="0.01". Тут задокументовано MDN . Думаючи про це, тому що я думаю, що це розумний дефолт, але також промінна зміна (так, це вплинуло на якийсь код, який я написав).

— Darragh

326

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

Найкращого, що ви можете досягти лише за допомогою HTML

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

Розгорніть фрагмент

— Aurélien Ooms
джерело

6

Ви , ймовірно , слід встановити , minщоб , 1як він хоче позитивні числа (а не невід'ємні числа).

— Мартін Тома

1

@pwdst Я це другого. <input type="number" min="0" step="1"/>є найбільш правильною відповіддю на питання. У будь-якому разі, який сенс мати як step="1"і pattern="\d+"? Я не можу вводити числа з плаваючою комою в жодному випадку.

— Датський Ашфак

27

Це не спрацювало для мене в останній версії хрому. Він не дозволяє вводити літери, але дозволяє вставляти спеціальні символи.

— Малавос

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-coder

2

@dotweb - я бачу вашу думку. Різниця між ними полягає в тому, що з атрибутом числа всі алфавітні символи автоматично видаляються, коли я скасовує вибір (тригер розмиття) для введення. Це не відбувається при використанні атрибуту шаблону. Я думаю, що ця відмінність важлива лише в тому випадку, якщо ви використовуєте AJAX для публікації своїх даних, а ви використовуєте якусь іншу подію, ніж submitдля запуску повідомлення.

— Zut

6

Це не робить того, що просив ОП. Лише цілі числа /\d*/.test(1.1) // true

— vsync

2

@vsync pattern="\d*"не те саме /\d*/, що pattern="\d*"дорівнює /^(?:\d*)$/, будь ласка, зверніться до документації з атрибутом шаблону HTML5 .

— Wiktor Stribiżew

37

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

За допомогою цього коду введення в текстове поле обмежує введення лише цифр. Шаблон - це новий атрибут, доступний у HTML 5.

Атрибут візерунка doc

— 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

Це важливо, щоб прийняти float числа та повторити .лише один раз, наприклад, 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"/>

Я гріється за мене :)

— Віктор Карпюк
джерело

Будьте уважні, що такий підхід може звести нанівець ваш метод (зміни) (обробник подій), а також стерти ваше значення за замовчуванням у полі введення.

— ХадідАлі

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

— Can TONBUL

11

Шаблон завжди краще для обмеження, спробувати oninputі minвідбуваються 1 для введення тільки цифри від 1 року

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

— Noothan yv
джерело

Це дуже цікаве рішення. Що для `value = $ {var}`?

— Розробник

Приклад @AcademyofProgrammer для цього вводу за замовчуванням

— Shinigamae

найкраща відповідь! працює для вставки, працює навіть в IE (10+), дає вам свободу відображати будь-яку клавіатуру через тип вводу, і не робить хромоване відображення цих примхливих стрілок вгору / вниз всередині поля.

— Janosch

5

ви спробували встановити stepатрибут 1, як це

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

— DevTeamExpress
джерело

4

Просто поклавши його у поле введення: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

— нелегалів
джерело

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

— а.вальчев
джерело

Я в кінцевому підсумку використовував це також з 1 незначним настроєм; Я змінив parseInt (значення) на parseInt (value.replace ('.', ''). Це дозволило мені вставити 1,56 і зберегти відображене значення на 156 замість 1.

— codecribblr

3

Встановити step="any". Добре працює. Довідка: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

— удіт міттал
джерело

2

Із специфікацій

step="any"або позитивне число з плаваючою комою
Вказує деталізацію значення значення елемента.

Таким чином, ви можете просто встановити його на 1:

— Девід Хедлунд
джерело

9

Я спробував це, але проблема полягає в тому, що ви все одно можете вводити число з плаваючою комою у текстове поле.

— JayPea

Отже, вам потрібен код, який блокує користувача від введення десяткової крапки?

— Blazemonger

2

Встановіть stepатрибут для будь-якого числа з плаваючою цифрою, наприклад, 0,01, і вам добре піти.

— Мантас К.
джерело

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

— Сартак
джерело

0

Наразі не можна перешкодити користувачеві писати десяткові значення у вхідні дані лише з HTML. Ви повинні використовувати javascript.

— Міхал
джерело

0

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

Розгорніть фрагмент

— Р. Ягобі
джерело

-2

У програмі Future ™ (див. Чи можу я використовувати ) на агентах користувача, які представляють вам клавіатуру, ви можете обмежити введення тексту лише цифровим input[inputmode].

— Вестон
джерело

inputmodeздебільшого для портативних пристроїв і спрацьовує правильне розташування клавіатури, але для "звичайних" комп'ютерів з клавіатурами це не завадить вводити все, що завгодно.

— vsync