Я создаю веб-приложение, которое в основном предназначено для мобильных браузеров. Я использую поля ввода с числовым типом, поэтому (большинство) мобильных браузеров вызывает только цифровую клавиатуру для лучшего взаимодействия с пользователем. Это веб-приложение в основном используется в регионах, где десятичным разделителем является запятая, а не точка, поэтому мне нужно обрабатывать оба десятичных разделителя.
Как покрыть весь этот беспорядок точкой и запятой?
Мои выводы:
Настольный Chrome
- Тип ввода = число
- Пользователь вводит "4,55" в поле ввода.
$("#my_input").val();
возвращает "455"- Я не могу получить правильное значение из ввода
Настольный Firefox
- Тип ввода = число
- Пользователь вводит "4,55" в поле ввода.
$("#my_input").val();
возвращает "4,55"- Хорошо, я могу заменить запятую на точку и получить правильное число с плавающей запятой
Браузер Android
- Тип ввода = число
- Пользователь вводит "4,55" в поле ввода.
- Когда ввод теряет фокус, значение усекается до "4".
- Запутывает пользователя
Windows Phone 8
- Тип ввода = число
- Пользователь вводит "4,55" в поле ввода.
$("#my_input").val();
возвращает "4,55"- Хорошо, я могу заменить запятую на точку и получить правильное число с плавающей запятой
Каковы «лучшие практики» в таких ситуациях, когда пользователь может использовать запятую или точку в качестве десятичного разделителя, а я хочу сохранить тип ввода html как число, чтобы улучшить взаимодействие с пользователем?
Могу ли я преобразовать запятую в точку «на лету», привязав ключевые события, работает ли он с числовым вводом?
РЕДАКТИРОВАТЬ
Currenlty У меня нет решения, как получить значение с плавающей запятой (как строку или число) из ввода, тип которого установлен на число. Если конечный пользователь вводит «4,55», Chrome всегда возвращает «455», Firefox возвращает «4,55», что нормально.
Также весьма раздражает то, что в Android (проверенный эмулятор 4.2), когда я ввожу «4,55» в поле ввода и меняю фокус на другое место, введенное число обрезается до «4».
.val()
, а Android делает что-то странное. Можете ли вы проверить, ведут ли они себя так же, когда вы устанавливаете язык системы на что-нибудь подходящее?var number = $(...).get(0).valueAsNumber;
if (isNaN(number)) number = parseFloat($(...).val().replace(',', '.');
Но это решение работает только в том случае, если число, которое было введено, содержит только 1 запятую и без лишних точек ...Ответы:
Я думаю, что в приведенных выше ответах не хватает необходимости указать другое значение для
step
атрибута, значение которого по умолчанию равно1
. Если вы хотите, чтобы алгоритм проверки входных данных допускал значения с плавающей запятой, укажите соответствующий шаг.Например, мне нужны долларовые суммы, поэтому я указал следующий шаг:
Нет ничего плохого в использовании jQuery для получения значения, но вы сочтете полезным напрямую использовать DOM API для получения
validity.valid
свойства элементов .У меня была аналогичная проблема с десятичной точкой, но я понял, что проблема возникла из-за стиля, который Twitter Bootstrap добавляет к числовому вводу с недопустимым значением.
Вот скрипка, демонстрирующая, что добавление
step
атрибута заставляет его работать, а также проверка, действительно ли текущее значение:TL; DR: установите для
step
атрибута a значение с плавающей запятой, поскольку по умолчанию оно равно1
.ПРИМЕЧАНИЕ . Запятая меня не проверяет, но я подозреваю, что если я установлю в настройках языка / региона моей ОС значение, в котором в качестве десятичного разделителя используется запятая, это сработает. * примечание в примечании *: этого не было для языка ОС / настроек клавиатуры * Немецкий * в Ubuntu / Gnome 14.04.
источник
step
атрибут as"any"
вместо, например,"0.01"
как показано здесь. См. Эту измененную версию скрипки nathciketa для демонстрации.<input type="number" step="any">
. Мне не удалось найти способ отключить проверку HTML5. Я могу отключить или настроить сообщение об ошибке, но получение значения из входных данных всегда является чушью. Любые идеи?This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
Так что шаблон бесполезен сtype="number"
type
наtext
, иначе ваш ответ не имеет смысла.Согласно w3.org атрибут value ввода числа определяется как число с плавающей запятой. . Синтаксис числа с плавающей запятой, кажется, принимает только точки в качестве десятичных разделителей.
Ниже я перечислил несколько вариантов, которые могут быть вам полезны:
1. Использование атрибута pattern
С помощью атрибута pattern вы можете указать разрешенный формат с помощью регулярного выражения совместимым с HTML5 способом. Здесь вы можете указать, что символ запятой разрешен, и полезное сообщение обратной связи, если шаблон не работает.
Примечание: кроссбраузерная поддержка сильно различается. Он может быть полным, частичным или отсутствовать.
2. Проверка JavaScript
Вы можете попробовать привязать простой обратный вызов, например, к onchange (и / или размыть ), которое либо заменит запятую, либо подтвердит все вместе.
3. Отключить проверку браузера ##
В-третьих, вы можете попробовать использовать атрибут formnovalidate для числовых входов, чтобы полностью отключить проверку браузера для этого поля.
4. Комбинация ..?
источник
Использование запятой или точки для десятичного разделителя полностью зависит от браузера. Браузер принимает решение в зависимости от языкового стандарта операционной системы или браузера, или некоторые браузеры получают подсказки с веб-сайта. Я составил сравнительную таблицу браузеров, показывающую, как разные браузеры поддерживают разные методы локализации. Safari - единственный браузер, в котором запятые и точки взаимозаменяемы.
По сути, вы, как веб-автор, не можете это контролировать. Некоторые обходные пути включают использование двух полей ввода с целыми числами. Это позволяет каждому пользователю вводить данные так, как вы ожидаете. Это не особо привлекательно, но будет работать в любом случае для всех пользователей.
источник
Используйте
valueAsNumber
вместо.val()
.источник
NaN
.использует текстовый тип, но принудительно отображает цифровую клавиатуру
тег inputmode - это решение
источник
Я не нашел идеального решения, но лучшее, что я мог сделать, это использовать type = "tel" и отключить проверку html5 (formnovalidate):
Если пользователь поставит запятую, он будет выводить с запятой в каждом современном браузере, который я пробовал (последний FF, IE, edge, opera, chrome, рабочий стол Safari, android chrome).
Основная проблема:
Для моего варианта использования мне нужно было только:
Если у вас есть подобное требование, это должно сработать для вас.
Примечание: мне не понравилась поддержка атрибута pattern. Formnovalidate, кажется, работает намного лучше.
источник
Когда вы вызываете,
$("#my_input").val();
он возвращается как строковая переменная. Так что используйтеparseFloat
иparseInt
для конвертации. Когда вы используетеparseFloat
свой компьютер или телефон, САМ понимает значение переменной.И, кроме того, вы можете преобразовать число с плавающей запятой в строку, используя
toFixed
аргумент, который имеет количество цифр, как показано ниже:источник
Судя по всему, у браузеров все еще есть проблемы (хотя Chrome и Firefox Nightly все в порядке). У меня есть хитрый подход для людей, которым действительно нужно использовать числовое поле (возможно, из-за маленьких стрелок, которых нет в текстовых полях).
Мое решение
Я добавил
keyup
обработчик событий к вводу формы, отслеживал состояние и устанавливал значение, когда оно снова становится действительным.Чистый фрагмент кода JS JSFIDDLE
Показать фрагмент кода
Угловой 9 фрагмент
Показать фрагмент кода
источник
Моя рекомендация? Не используйте jQuery вообще. У меня была такая же проблема, как и у вас. Я обнаружил, что
$('#my_input').val()
всегда возвращает какой-то странный результат.Попробуйте использовать
document.getElementById('my_input').valueAsNumber
вместо,$("#my_input").val();
а затем используйте,Number(your_value_retrieved)
чтобы попытаться создать число. Если значение равно NaN, вы точно знаете, что это не число.Следует добавить, что когда вы пишете число на входе, ввод фактически принимает почти любой символ (я могу написать знак евро, доллар и все другие специальные символы), поэтому лучше всего получить значение, используя
.valueAsNumber
вместо использования jQuery.Да, и кстати, это позволяет вашим пользователям добавлять интернационализацию (то есть: поддерживать запятые вместо точек для создания десятичных чисел). Просто позвольте
Number()
объекту создать что-то для вас, и это будет, так сказать, безопасно для десятичных чисел.источник
valueAsNumber
он также не работает последовательно в браузерах.Похоже, вы хотели бы использовать toLocaleString () для числовых входов.
См. Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString для его использования.
Локализация чисел в JS также рассматривается в разделе "Интернационализация" (форматирование чисел "num.toLocaleString ()"), не работающем для Chrome.
источник
toLocaleString
это ненадежно для разных платформ.