Я бачив, що деякі браузери локалізують input type="number"позначення чисел.

Отже, зараз у полях, де моя програма відображає координати довготи та широти, я отримую такі речі, як "51,983", де має бути "51,982559". Моє обхідне рішення полягає у використанніinput type="text" замість цього, але я хотів би використовувати введення числа з правильним відображенням десяткових знаків.

Чи є спосіб змусити браузери використовувати десяткову крапку при введенні числа, незалежно від локальних налаштувань на стороні клієнта?

(Само собою зрозуміло, що в моєму додатку я все одно виправляю це на стороні сервера, але в моїй установці мені також потрібно, щоб це було коректно на стороні клієнта (через деякий JavaScript)).

Заздалегідь спасибі.

ОНОВЛЕННЯ Станом на зараз, перевіряючи у версії Chrome 28.0.1500.71 м у Windows 7, числове введення просто не приймає десяткові крапки, відформатовані комою. Пропоновані пропозиції зstepатрибутом, здається, не працюють.

http://jsfiddle.net/AsJsj/

В даний час 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" .

Отже, рішення, до якого ви можете вдатися, - це обернути свої числові входи елементом-контейнером, який налаштований на використання культури, яка використовує крапки як десятковий роздільник.

З атрибутом step, вказаним для точності десяткових знаків, які ви хочете, та атрибутом lang [який встановлюється як локаль, що форматує десяткові крапки з періодом ], ваш числовий ввід html5 прийме десяткові крапки. напр. приймати значення на зразок 10,56; я маю на увазі 2 десяткові числа, зробіть це:

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

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

Редагування Додайтеатрибут lang до вхідного елемента зі значенням мови, яке форматує десяткові знаки з точкою замість коми

Відповідно до специфікації , Ви можете використовувати anyяк значення stepатрибута:

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

Використовуйте атрибут lang на вході. Локаль у моєму веб-додатку fr_FR, lang = "en_EN" на введеному номері, і я можу байдуже використовувати кому або крапку. Firefox завжди відображає крапку, а Chrome - кому. Але обидва сепаратора дійсні.

На жаль, охоплення цього поля введення в сучасних браузерах дуже низьке:

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

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

Поки що лише Chrome, Safari та Opera мають акуратну реалізацію, але всі інші браузери не працюють. Деякі з них, здається, навіть не підтримують десяткові крапки (наприклад, BB10)!

Я не знаю, чи допомагає це, але я натрапив тут, шукаючи цю саму проблему, лише з точки зору введення (тобто я помітив, що я <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, а не локалів!) Чисел. Ура.

Я знайшов статтю в блозі, яка, схоже, пояснює щось пов’язане:
тип введення 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">

Це може бути не красиво, але це працює.

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

Очевидно, input.valueAsNumberповертає поточне значення як число з плаваючою комою. Ви можете використати це для повернення потрібного значення.

Див. Http://diveintohtml5.info/forms.html#type-number

Чи роздумували ви про використання Javascript для цього?

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

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

щоб відправити ці координати на сервер, зробіть це, надіславши текстовий ланцюжок. HTTPлише відправляєTEXT

у клієнті уникайте розбору вхідних координат з "int ", працюйте з текстовими рядками

якщо ви друкуєте шнури в html за допомогою php або подібного ... плаваєте до тексту та друкуєте в html

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/

Сподіваюся, це вирішить вашу проблему

використовувати шаблон

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

Щасти

Для цього я написав спеціальний фрагмент коду

Якщо ви хочете замінити ,на ., повністю видаліть функції translate_decimals .

var input = document.querySelector('input[role="custom-number"]');
var bincr = document.querySelector('button[role="increment"]');
var bdecr = document.querySelector('button[role="decrement"]');

function translate_decimals(side = 0)
{
	input.value = (side == ',' ? input.value.replace('.',',') : input.value.replace(',','.'));
}
translate_decimals(',');

bincr.addEventListener('click', ()=>{
	if (input.hasAttribute('max'))
	{
		if (input.value.substr(0,input.getAttribute('max').length) == input.getAttribute('max').substr(0,input.getAttribute('max').length))
		{
			return;
		}
		else
		{
			translate_decimals('.');
			let temp = input.value;
			input.value = "";
			input.value = (input.hasAttribute('step') ? (parseFloat(temp) + parseFloat(input.getAttribute('step'))) : temp++);
			translate_decimals(',');
		}
	}
});

bdecr.addEventListener('click', ()=>{
	if (input.hasAttribute('min'))
	{
		if (input.value.substr(0,input.getAttribute('min').length) == input.getAttribute('min').substr(0,input.getAttribute('min').length))
		{
			return;
		}
		else
		{
			translate_decimals('.');
			input.value = (input.hasAttribute('step') ? (input.value - input.getAttribute('step')) : input.value--);
			translate_decimals(',');
		}
	}
});

/* styling increment & decrement buttons */
button[role="increment"],
button[role="decrement"] {
	width:32px;
}

<input type="text" role="custom-number" step="0.01" min="0" max="0" lang="en" value="1.99">
<button role="increment">+</button>
<button role="decrement">-</button>

Мені потрібно було переконатися, що значення все ще можна вводити з комою замість крапки як десятковий роздільник. Здається, це вікова проблема. Довідкову інформацію можна знайти за цими посиланнями:

• https://www.slightfuture.com/webdev/html5-input-number-localization.html
• https://codepen.io/aminimalanimal/full/bdOzRG

Нарешті я вирішив це за допомогою трохи jQuery. Заміна коми на "Змінити" крапками. Здається, це поки добре працює в останніх Firefox, Chrome та Safari.

$('input[type=number]').each(function () {

  $(this).change(function () {

    var $replace = $(this).val().toString().replace(/,/g, '.');

    $(this).val($replace);

  })

});

Атрибут кроку HTML

<input type="number" name="points" step="3">

Приклад: якщо step = "3", юридичні номери можуть бути -3, 0, 3, 6 тощо.

Порада. Атрибут step можна використовувати разом з атрибутами max та min для створення діапазону юридичних значень.

Примітка: Атрибут step працює з такими типами вводу: число, діапазон, дата, дата-час, місце-дата-час, місяць, час і тиждень.