У меня есть веб-приложение, где я указываю, что поле ввода является числом, используя тип свойства HTML5 = "число".
<input type="number" value="123456" />
Указывая тип, Chrome автоматически форматирует значение для включения запятой (123 456). В других браузерах он не форматирует номер, но также не предотвращает нечисловые символы.
В этом случае я не хочу добавлять запятую. Есть ли способ отключить локализованное форматирование?
Это происходит из-за поведения, связанного с типом ввода HTML5 number в Chromium, и вы определенно не единственный, который не заботится о это.
В прошлом я работал над этой проблемой, используя тип text. Например, это сработало хорошо (протестировано только сейчас в Chrome 11.0.696.71):
<input type="text"
placeholder="Enter Text"
name="inputName"
pattern="[0-9]*">
Такое поведение типа number (по крайней мере, для меня) определенно является ошибкой, потому что стандарт HTML5 указывает, что number должен иметь следующее значение при форматировании для отображения:
Алгоритм преобразования числа в строку, заданный с помощью ввода номера, выглядит следующим образом: Вернуть действительный номер с плавающей запятой, который представляет ввод.
И стандарт определяет "действительный номер с плавающей запятой" здесь, и, насколько я вижу, включая группировку символов не ожидается.
Я выделил проблему для следующего кода в кишки WebKit. Я включил строку, которая также исправляет проблему:
// From LocalizedNumberICU.cpp
String formatLocalizedNumber(double number, unsigned fractionDigits)
{
NumberFormat* formatter = numberFormatter();
if (!formatter)
return String();
UnicodeString result;
formatter->setMaximumFractionDigits(clampToInteger(fractionDigits));
formatter->setGroupingUsed(FALSE); // added this line to fix the problem
formatter->format(number, result);
return String(result.getBuffer(), result.length());
}
Я нахожусь на каникулах на следующей неделе, но планирую отправить этот патч команде WebKit, когда вернусь. Как только они (надеюсь) примут патч, Chromium должен вытащить его как часть обычного процесса обновления.
Вы можете увидеть исходный код здесь, исправленную версию здесь, а также разницу между оригинальный файл и исправленный файл здесь. Последний патч был создан Shinya Kawanaka.
Есть несколько дополнительных свойств, которые вы можете проверить, включая valueAsNumber.
Chrome пытается предоставить вам лучший метод ввода, основанный на типе ввода. В этом случае число также имеет некоторые дополнительные возможности, такие как переключение вверх и вниз.
Точка этого, если число недопустимо, вы сможете обнаружить, что есть ошибки, а также установить стиль input[type=number]:invalid { background-color: red; }
Вы можете попробовать...
<input type="text" pattern="[0-9]*" value="123456" />
который обеспечит ввод 0-9 на Firefox 4 на рабочем столе, а также на iPhone; У меня нет Chrome под рукой, чтобы попробовать, но он должен сделать то же самое.
Число - один из новых типов ввода HTML5. Есть множество из них - адрес электронной почты, дата, время, URL и т.д. Однако я думаю, что только Chrome их реализовал до сих пор. Остальные возвращаются к использованию типа по умолчанию (текст).
Подробнее о типах ввода HTML5: http://diveintohtml5.ep.io/forms.html
Если вы хотите отключить его в Chrome, вы можете оставить его как текст и изменить его на номер, если пользовательское устройство является карманным. Поскольку это не убийца юзабилити, если пользовательское устройство обнюхивает неверный результат, у вас не должно быть никаких проблем.
Обратитесь к моему ответу за этот похожий вопрос.
Я считаю, что использование <input type="tel" /> наиболее логично для предотвращения этой ловушки в настоящее время. Другие варианты интригуют и немного новы для меня (например, атрибут pattern), но я нашел их неудовлетворительными для моего дизайна. Вы можете посмотреть скриншот мобильного приложения, которое я заполнил для Hilton не так давно. здесь (это фактически показано в ответе, на который я впервые ссылался).
Попробуйте следующее:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$('[type=number]').attr('type', 'text').attr('pattern', '[0-9]*');
}
Вот полный список регулярных выражений, которые вы можете подключить к атрибуту "pattern" тега ввода html: HTML5 Pattern
Вот как я использую шаблон для форматирования числа двух десятичных знаков:
<input type="number" pattern="\d+(\.\d{2})?" />
К сожалению, похоже, что iPad не работает правильно.
Почему вы хотите отключить локализованное форматирование? Если вы хотите другой формат, просто измените настройки локализации вашего ПК. Почему бы пользователю не было интересно показать номер в своем локальном формате? Это определенно не ошибка в Chrome, но функция!
Мне кажется, что вы на самом деле не используете "число" в качестве входных данных, а скорее "текстовый" код с шаблоном. См. Другие сообщения для предложений.