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

Ответ 1

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

<input type="number" step="0.01" min="0" >

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

Ответ 2

В настоящее время 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".

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

Ответ 3

В соответствии с спецификацией вы можете использовать any как значение атрибута step:

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

Ответ 4

Все еще не протестирован, но попробуйте использовать атрибут "step", как описано здесь:

http://www.w3.org/TR/html-markup/input.number.html#input.number.attrs.step.float

Чтобы сделать что-то вроде этого:

<input type="number"
       min="0"
       max="999"
       step="0.000001">

Ответ 5

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

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

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

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

Ответ 6

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

поэтому u должен установить его как текст

<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/

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

Ответ 7

Я нашел статью в блоге, которая, кажется, объясняет что-то связанное: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-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">

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

Изменить: обновленная ссылка https://www.isotoma.com/blog/2012/03/02/html5-input-typenumber-and-decimalsfloats-in-chrome/

Ответ 8

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

.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, а не номера локалей!). Приветствия.

Ответ 9

Насколько я понимаю, HTML5 input type="number всегда возвращает input.value как string.

По-видимому, input.valueAsNumber возвращает текущее значение как число с плавающей запятой. Вы можете использовать это, чтобы вернуть нужное значение.

См. http://diveintohtml5.info/forms.html#type-number

Ответ 10

один параметр javascript parseFloat()... никогда не разбирайте "text chain" --> 12.3456 с точкой в ​​int... 123456 (int удаляет точку) разведите текстовую цепочку в FLOAT...

чтобы отправить это соглашение на сервер, отправляйте текстовую цепочку. HTTP отправляет только TEXT

в клиенте не следует разбирать входные координаты с помощью "int", работать с текстовыми строками

если вы печатаете шнуры в html с php или похожим... float to text и печатаете в html

Ответ 11

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

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

Ответ 12

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

Ответ 13

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

<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."
>

удача