Chrome автоформаты ввода = число - PullRequest
70 голосов
/ 17 марта 2011

У меня есть веб-приложение, в котором я указываю поле ввода как число, используя свойство HTML5 type = "number".

<input type="number" value="123456" />

Указав тип, Chrome автоматически форматирует значение, добавляя запятую (123 456). В других браузерах он не форматирует число, но также не предотвращает использование нечисловых символов.

В этом случае я не хочу добавлять запятую. Есть ли способ отключить локализованное форматирование?

Ответы [ 8 ]

92 голосов
/ 30 мая 2011

Это происходит из-за поведения, связанного с типом ввода HTML5 number в Chromium, и вы определенно не единственный , который не заботится об этом.

В прошлом я работал над этой проблемой, используя тип text. Например, это сработало хорошо (только что протестировано в Chrome 11.0.696.71):

<input type="text" 
       placeholder="Enter Text" 
       name="inputName" 
       pattern="[0-9]*">

Такое поведение типа number (по крайней мере для меня) определенно является ошибкой, поскольку стандарт HTML1 указывает, что 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.

5 голосов
/ 16 мая 2011

Вы можете попробовать ...

<input type="text" pattern="[0-9]*" value="123456" />

, что обеспечит ввод 0-9 в Firefox 4 на рабочем столе, а также на iPhone; У меня нет Chrome под рукой, чтобы попробовать его, но он должен делать то же самое.

5 голосов
/ 26 марта 2011

Есть несколько дополнительных свойств, которые вы можете проверить, включая valueAsNumber.

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

Смысл в том, что если номер не действителен, вы сможете обнаружить наличие ошибок, а также установить стиль input[type=number]:invalid { background-color: red; }

3 голосов
/ 30 апреля 2011

Число - это один из новых типов ввода HTML5.Их множество: электронная почта, дата, время, URL и т. Д. Однако, я думаю, что только Chrome реализовал их до сих пор.Другие используют тип по умолчанию (текст).

Для получения дополнительной информации о типах ввода HTML5: http://diveintohtml5.ep.io/forms.html

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

2 голосов
/ 20 июля 2012

Обратитесь к моему ответу на этот похожий вопрос .

Я считаю, что использование <input type="tel" /> наиболее логично для избежания этой ловушки в настоящее время.Другие варианты интригуют и немного новы для меня (например, атрибут pattern), но я нашел их неудовлетворительными для моего дизайна.Вы можете посмотреть на скриншот мобильного приложения, которое я завершил для Hilton не так давно здесь (на самом деле оно показано в ответе, на который я впервые ссылался).

1 голос
/ 14 июня 2013

Попробуйте это:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('[type=number]').attr('type', 'text').attr('pattern', '[0-9]*');
}
0 голосов
/ 24 января 2013

Почему вы хотите отключить локализованное форматирование? Если вы хотите другой формат, просто измените настройки локализации вашего ПК. Почему пользователю не было бы интересно показать число в его или ее местном формате? Это определенно не ошибка в Chrome , а особенность!

Мне кажется, вы на самом деле не используете «число» в качестве входных данных, а скорее «текстовый» код с шаблоном. См. Другие сообщения для предложений к этому.

0 голосов
/ 24 января 2012

Вот полный список регулярных выражений, которые можно подключить к атрибуту «pattern» входного тега html: HTML5 Pattern

Вот как я использую шаблон для форматирования десятичных знаков числа два:

<input type="number" pattern="\d+(\.\d{2})?" />

К сожалению, на iPad это работает не совсем правильно.

...