Ввод HTML-тега type=”number” и десятичного разделителя на основе культуры

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

Как заархивировать это?

  <input type="number" step="0.1"  pattern="[0-9]+([\,][0-9]+)?" min="0" max="5" />

Если даже я применю любое число, например, "0,1", следующим щелчком спиннера. Браузер сбрасывает его на "0,2", в котором вместо запятой стоит точка.

Итак, как сохранить правильный десятичный разделитель?

Любая подсказка, как это исправить с помощью jQuery?

Источник

3 ответа

Решение

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

Единственный способ, которым я могу придумать, - это использовать JavaScript. Вот один пример с использованием обычного поля ввода. К сожалению, вы потеряете атрибуты ввода html5, связанные с вводом чисел.

var Inputs = document.querySelectorAll('input');
for (var i=0; i<Inputs.length; i++) {
  Inputs[i].onblur = function() {
    this.value = this.value.replace('.',',');
  }
}

function multiplyAndPopulate() {
  var A1 = theForm.A1field.value.replace(',','.');
  var A2 = theForm.A2field.value.replace(',','.');
  var R1 = (A1*A2);
  if (isNaN(R1) == true) {
    alert('Invalid.');
    return false;
  }
  else {
    theForm.R1field.value = R1;
    theForm.R1field.value = theForm.R1field.value.replace('.',',');
  }
}
<input type="text" pattern="[0-9]+([\,][0-9]+)?" MaxLength="3"/>

Источник

В настоящее время ответы, предоставленные этой веткой, приводят к решению изменения type="number" в type="text" что является шагом назад с точки зрения пользователя.

Я решил эту проблему по-другому.

Обработка данных из бэкэнда - подготовка формы.

Формы обычно предоставляют значения по умолчанию или значения для редактирования для некоторого поля. Вот почему важно, как вы предоставляете значения для ввода в форме. Некоторые платформы могут локализовать значения для вас перед привязкой их к форме, поэтому значения, поступающие с вашего сервера (база данных и язык программирования), могут быть разделены запятыми или точками. Если вы предоставите 0.01 (в большинстве случаев) в качестве входного значения вы не получите ошибки в любом браузере на стороне клиента, но если вы укажете значение 0,01 (локализованное значение) значение не будет отображаться в браузере, но будет предоставлено при вводе в качестве атрибута, и вы получите ошибку консоли: it is not proper number value, Поэтому первое, что нужно сделать, это заменить "," на "." при рендеринге формы на стороне сервера, чтобы на стороне клиента всегда было значение, разделенное точками.

Если вы оставите его на этом этапе, ваша форма будет уязвима для настроек локали в браузере. Если вы напечатаете такую ​​форму в Firefox с языковым стандартом en-US, вы увидите ввод с разделенным точками значением, но если вы напечатаете эту форму с Chrome с языковым стандартом fr-FR, вы не увидите значения, разделенного запятой. Существует простое решение, если вы хотите применить конкретную локаль. С этим атрибутом:

<html lang="en-US" >

вы получите точки в вашем типе номера ввода, и это даст вам значение через запятую:

<html lang="pl-PL" >

Атрибут lang также может быть установлен на самом входе.

Обработка внешнего интерфейса.

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

Это основные правила для меня. Кроме того, если вы используете некоторые методы JS, такие как parseFloat(), вы получите точки в значении, поэтому вам придется заменить точки на запятую, если вы находитесь в локали, подобной запятой.

Источник

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

function whatDecimalSeparator() {
    var n = 1.1;
    n = n.toLocaleString().substring(1, 2);
    return n;
}

$(document).ready(function(){
    var currentSeparator = whatDecimalSeparator();
    var currentStep = '0'+ currentSeparator + '1';
    $('.js-numberInput')[0].step = currentStep;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="js-numberInput" type="number" step="0.1"  pattern="[0-9]+([\,][0-9]+)?" min="0" max="5" />

ОБНОВЛЕНИЕ (комментарий Развана Думитру):

Я нахожу этот комментарий:

Тип ввода HTML5 = число неадекватен с точки зрения локализации, как из-за определения, так и из-за реализаций. Он предназначен для локализации, но в соответствии с языком браузера, который вы не можете установить или даже знать как дизайнер / автор.

в этой теме Локализация номера типа ввода. Одна идея состоит в том, чтобы самостоятельно обработать всю эту логику и избавиться от ввода type="number", если вы можете это сделать. Вы можете использовать и использовать пользовательский плагин для спиннеров

Источник
Другие вопросы по тегам