Показывать только цифры css

Как заставить тег ввода HTML принимать только числовые значения?

Мне нужно убедиться, что определенный Поле принимает только числа в качестве значения. Ввод не является частью формы. Следовательно, он не отправляется, поэтому проверка во время отправки невозможна. Я хочу, чтобы пользователь не мог вводить какие-либо символы, кроме цифр. Есть ли аккуратный способ добиться этого?

Взгляните на эту [ссылка][1], в которой достаточно информации. [1]: stackoverflow.com/questions/469357/… — Maheshkumar

30 ответы

HTML 5

Это будет работать только в браузере жалоб HTML5. Убедитесь, что тип документа вашего HTML-документа: Смотрите также https://github.com/jonstipe/number-polyfill для прозрачной поддержки в старых браузерах.

JavaScript

Это позволяет использовать любой вид входного фильтра для текста , включая различные числовые фильтры. Это будет правильно обрабатывать копирование + вставку, перетаскивание + удаление, сочетания клавиш, операции контекстного меню, клавиши без ввода и все раскладки клавиатуры.

Читать этот ответ или попробуйте сами на JSFiddle. Для общих целей вы можете пройти проверку JS, как показано ниже:

function isNumberKey(evt) < var charCode = (evt.which) ? evt.which : evt.keyCode if (charCode >31 && (charCode < 48 || charCode >57)) return false; return true; > 

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode >57))) 

Да, у меня это работает как в Firefox, так и в Chrome. Странно, что для такой простой вещи нужен js. — chtenb

Не работает в chrome 30. У меня нет проблем с вводом букв в ваш «числовой» ввод на скрипке. Хм. — Бен

для более надежного решения также рассмотрите возможность копирования и вставки, чтобы добавить буквы в этот пример! — Нил

Ой!! первая строка должна быть изменена на: var charCode = (evt.which) ? evt.which : evt.keyCode; — Пейман Ф.

Руководство по проверке ввода Хотя, если ваш тип документа не html тогда я думаю, вам нужно будет использовать javascript/jquery.

Хотя firefox дает поле ввода красную рамку, когда вводятся нецифровые символы, как в firefox, так и в chrome вы можете вводить нечисловые символы в поле ввода. — chtenb

хорошо, может быть, это не поддерживается в ваших версиях браузера? Не уверен на 100%, но, честно говоря, я бы также использовал js для проверки, в данный момент я бы не стал полагаться исключительно на html5 — мартинкарлин87

Это позволит использовать только цифры и пробел. Если вам нужна и десятичная часть, используйте этот фрагмент кода

он возвращает логическое значение, поэтому я думаю, вы можете добавить еще одну проверку, которая принимает текущее значение и проверяет, соответствует ли длина указанному вами. — абхиджитвиджаян

• Chrome 6 +
• Firefox 29 +
• Опера 10.1 +
• Safari 5 +
• Edge
• (Интернет Эксплорер 10+)

ответ дан 12 мар ’18, в 13:03

Кажется, он очень хорошо работает в хроме, но не в фаерфоксе. — chtenb

Ах. Это потому, что firefox не поддерживает тип ввода = число. В качестве альтернативы вы можете использовать некоторый javascript для проверки ввода, когда пользователь вводит текст. Ответ обновлен. — звездный лучрадуга

jscript на jsfiddle.net/VmtF5, тоже не получится. Даже если в начале символа стоит 1 цифра, проверка не пройдена. Попробуйте сами на jsfiddle — Акшай

@aarn У меня работает (см. i.imgur.com/AWdmEov.png ), Какой браузер вы используете? — звездный лучрадуга

@starbeamrainbowlabs Я использую Firefox. Также введите 6abc, это не покажет вам ошибку — Акшай

Вы можете использовать следующий однострочный код как:

Он будет принимать номера только.

Я думаю, что это самый простой способ. Не нужен JS и чистый вид. — Сяфикур__

Идеально, если вам нужно добавить 0 перед нумерацией. 01 , 02 . 010 or 009 . — Флорида

или вы можете написать это сложным, но полезным способом:

Внимание: кросс-браузер и регулярное выражение в буквальном смысле.

как бы вы добавили возможность ввода типа .5 или .3? — user3591637

Затем вы должны рассмотреть первый и второй символы ( 0.43 or .43 ), что можно сделать, проверив значение текущего ввода плюс нажатую клавишу. Это было бы некрасиво в однострочном коде, я рекомендую использовать для этого функцию. Чтобы проверить целое число или число с плавающей запятой, отметьте здесь. — Фредрик Гаусс

нельзя удалить ошибочно введенный номер — Крис Сим

Я использовал регулярное выражение, чтобы заменить входное значение необходимым шаблоном.

var userName = document.querySelector('#numberField'); userName.addEventListener('input', restrictNumber); function restrictNumber (e) < var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), ""); this.value = newValue; >

Вот почему я люблю регулярные выражения. Спасибо, чувак, ты действительно спас мой день — Нирмал

Вы можете использовать тег с атрибутом type=’number’.

Например, вы можете использовать

Это поле ввода допускает только числовые значения. Вы также можете указать минимальное значение и максимальное значение, которое должно быть принято этим полем.

function AllowOnlyNumbers(e) < e = (e) ? e : window.event; var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData; var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode; var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key); return (/^\d+$/.test(str)); >

Когда вы вставляете значение, содержащее текст, оно разрешает это — Крис Сим

Он также позволяет использовать специальные символы. Например: á, ã, ê, ó, è и т. д. — Брэд Аренс

onkeyup срабатывает при отпускании клавиши.

isNaN(parseFloat(value))? проверяет, не является ли входное значение числом.

Если это не число, значение устанавливается равным 1000. : Если это число, значение устанавливается равным значению.

записки: Почему-то работает только с type=»number»

Чтобы сделать его еще более захватывающим, у вас также может быть граница:

9000?1000:value" type="number" value="1000" > 

Я немного поборолся с этим. Многие решения здесь и в других местах казались сложными. Это решение использует jQuery/javascript наряду с HTML.

  $(document).on('change', '.validateNumber', function() < var abc = parseInt($(this).val()); if(isNaN(abc)) < abc = 1; >$(this).val(abc); >); 

В моем случае я отслеживал небольшие количества с минимальным значением 1, поэтому min=»1″ во входном теге и abc = 1 в проверке isNaN(). Для положительных чисел вы можете изменить эти значения на 0 и даже просто удалить min=»1″ из входного тега, чтобы разрешить отрицательные числа.

Также это работает для нескольких ящиков (и может сэкономить вам время загрузки по сравнению с их индивидуальным идентификатором), просто добавьте класс «validateNumber», где это необходимо.

parseInt() в основном делает то, что вам нужно, за исключением того, что она возвращает NaN, а не целочисленное значение. С помощью простого if() вы можете установить «резервное» значение, которое вы предпочитаете во всех случаях, когда возвращается NaN :-). Также W3 заявляет здесь что глобальная версия NaN будет вводить приведение типов перед проверкой, что дает дополнительную проверку (Number.isNaN() этого не делает). Любые значения, отправляемые на сервер/бэкэнд, все равно должны проверяться там!

Источник

Как применить CSS только к числам в тексте внутри или в любом элементе

?

Если некоторые (важные) символы не выглядят хорошо в выбранном вами шрифте, вы должны сначала найти лучший шрифт, во-вторых, попытаться найти более подходящий шрифт, и в-третьих, попросить (где-то, не в SO) помочь в поиске адекватный шрифт

@JukkaK.Korpela..JukkaK.Korpela .. У меня есть только 2 варианта выбора шрифта, которые поддерживают все браузеры, включая ie (Local Language), поэтому других альтернатив нет.

4 ответа

Это можно сделать, используя CSS unicode-range свойство, которое существует в пределах @font-face .

Числа с 0 по 9 существуют в Юникоде в диапазоне U+0030 до U+0039 . Итак, что вам нужно сделать, это включить шрифт вместе с существующим шрифтом, который специально нацелен на этот диапазон:

Результатом этого будет то, что каждый экземпляр символов Unicode U+0030 (0) до U+0039 (9) будет отображаться в шрифте, который специально нацелен на этот диапазон, и каждый другой символ будет в вашем текущем шрифт.

Это очень хорошее решение, но вы, возможно, захотите реализовать запасной вариант javascript, если браузер не поддерживает диапазон unicode . Насколько я знаю, это довольно новая спецификация.

В зависимости от того, что означает «число», вам может понадобиться добавить «.», «,», «’», «-», «-», «+» и т. Д., И тогда у вас будут проблемы, поскольку они могут появляются и внешние цифры. Данное правило как таковое подходит для целых чисел без знака (последовательности цифр).

Источник

Атрибут inputmode

Если нужно ввести только цифры зачем показывать всю клавиатуру? Подсказка для браузера какой набор символов нужен.

Время чтения: меньше 5 мин

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Атрибут inputmode говорит браузеру на устройствах с экранной клавиатурой какой набор символов показать при вводе данных в конкретное поле. Указывается для элементов или .

Пример

Скопировать ссылку «Пример» Скопировано

  input type="text" inputmode="numeric"> textarea inputmode="text">textarea>    Скопировать Скопировано Не удалось скопировать   

  input type="tel" inputmode="tel">    Скопировать Скопировано Не удалось скопировать   

  input type="email" inputmode="email">    Скопировать Скопировано Не удалось скопировать