Принудительно вводить десятичную точку вместо запятой при вводе числа в HTML5 (на стороне клиента)

Question

Я видел, что некоторые браузеры локализуют нотацию чисел input type="number".

Итак, теперь в полях, где мое приложение отображает координаты долготы и широты, я получаю что-то вроде «51,983», где оно должно быть «51,982559». Мой обходной путь - вместо этого использовать input type="text", но я бы хотел использовать ввод числа с правильным отображением десятичных дробей.

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

(Само собой разумеется, что в моем приложении я в любом случае исправляю это на стороне сервера, но в моей настройке мне также нужно, чтобы оно было правильным на стороне клиента (из-за некоторого JavaScript)).

Заранее спасибо.

UPDATE На данный момент, проверяя в Chrome версии 28.0.1500.71 m в Windows 7, ввод числа просто не принимает десятичные дроби, отформатированные через запятую. Предлагаемые предложения с атрибутом step не работают.

http://jsfiddle.net/AsJsj/

Answer 1

В настоящее время Firefox соблюдает язык элемента HTML, на котором находится ввод.Например, попробуйте эту скрипту в Firefox:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

Вы увидите, что цифры на арабском языке, а запятая используется в качестве десятичного разделителя, как в случае с арабским,Это связано с тем, что тегу BODY присвоен атрибут lang="ar-EG".

. Далее попробуйте следующее:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

Этот значок отображается с точкойв качестве десятичного разделителя, потому что входные данные заключены в DIV с заданным атрибутом lang="en-US".

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

Answer 2

С атрибутом step , указанным с точностью до требуемых десятичных знаков, ваш числовой ввод html5 будет принимать десятичные дроби. например. принимать значения, как 10,56; я имею в виду 2 знака после запятой, сделайте это:

<input type="number" step="0.01" min="0" lang="en" value="1.99">

Вы также можете указать атрибут max для максимально допустимого значения.

Редактировать Добавьте атрибут lang к элементу ввода со значением локали, которое форматирует десятичные дроби с точкой вместо запятой

Answer 3

Согласно spec , вы можете использовать any в качестве значения атрибута step:

<input type="number" step="any">

Answer 4

Использовать атрибут lang на входе. Локаль в моем веб-приложении fr_FR, lang = "en_EN" на входном номере, и я могу безразлично использовать запятую или точку. Firefox всегда отображает точку, Chrome - запятую. Но оба разделителя действительны.

Answer 5

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

http://caniuse.com/#feat=input-number

Поэтому я рекомендую ожидать откат и полагаться на тяжелые программно-загружен ввод [type = text] для выполнения работы, пока поле не будет принято.

Пока что только Chrome, Safari и Opera имеют аккуратную реализацию, но все остальные браузеры глючат.Некоторые из них, кажется, даже не поддерживают десятичные дроби (например, BB10)!

Answer 6

Я не знаю, помогает ли это, но я наткнулся здесь при поиске этой же проблемы, только с точки зрения input (т.е. я заметил, что мой <input type="number" /> принимает и запятую, и точка при вводе значения, но только последнее связывалось с моделью angularjs, которую я назначил для ввода). Итак, я решил записать эту краткую директиву:

.directive("replaceComma", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.on("keydown", function(e) {
                if(e.keyCode === 188) {
                    this.value += ".";
                    e.preventDefault();
                }
            });
        }
    };
});

Затем в моем html просто: <input type="number" ng-model="foo" replace-comma /> будет заменять запятые точками на лету, чтобы пользователи не могли вводить недопустимые (с точки зрения javascript, а не локальные!) Числа. Приветствия.

Answer 7

Я нашел статью в блоге, которая, кажется, объясняет что-то связанное:
Тип ввода HTML5 = число и десятичные знаки / числа с плавающей запятой в Chrome

В итоге:

• step помогает определить область допустимых значений
• по умолчанию step: 1
• , таким образом, доменом по умолчанию являются целые числа (от min до max включительно, если дано)

Я бы предположил, что это противоречит неоднозначности использования запятой в качестве разделителя тысяч по сравнению с запятой в качестве десятичной запятой, и ваш 51,983 на самом деле является странным образом проанализированной пятьдесят одна тысяча девятьсот восемь-три.

Очевидно, вы можете использовать step="any", чтобы расширить домен до всех рациональных чисел в диапазоне, однако я сам не пробовал. Для широты и долготы я успешно использовал:

<input name="lat" type="number" min="-90.000000" max="90.000000" step="0.000001">
<input name="lon" type="number" min="-180.000000" max="180.000000" step="0.000001">

Это может быть не красиво, но это работает.

Answer 8

используйте шаблон

<input 
       type="number" 
       name="price"
       pattern="[0-9]+([\.,][0-9]+)?" 
       step="0.01"
       title="This should be a number with up to 2 decimal places."
>

удачи

Answer 9

1) 51 983 - номер типа строки, не принимает запятую

так что вы должны установить его как текст

<input type="text" name="commanumber" id="commanumber" value="1,99" step='0.01' min='0' />

заменить, на.

и измените атрибут типа на число

$(document).ready(function() {
    var s = $('#commanumber').val().replace(/\,/g, '.');   
    $('#commanumber').attr('type','number');   
    $('#commanumber').val(s);   
});

Выезд http://jsfiddle.net/ydf3kxgu/

Надеюсь, это решит вашу проблему

Answer 10

Рассматривали ли вы использовать Javascript для этого?

$('input').val($('input').val().replace(',', '.'));