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

Как покрыть весь этот беспорядок точкой и запятой?

Мои выводы:

Настольный Chrome

• Тип ввода = число
• Пользователь вводит "4,55" в поле ввода.
• $("#my_input").val(); возвращает "455"
• Я не могу получить правильное значение из ввода

Настольный Firefox

• Тип ввода = число
• Пользователь вводит "4,55" в поле ввода.
• $("#my_input").val(); возвращает "4,55"
• Хорошо, я могу заменить запятую на точку и получить правильное число с плавающей запятой

Браузер Android

• Тип ввода = число
• Пользователь вводит "4,55" в поле ввода.
• Когда ввод теряет фокус, значение усекается до "4".
• Запутывает пользователя

Windows Phone 8

• Тип ввода = число
• Пользователь вводит "4,55" в поле ввода.
• $("#my_input").val(); возвращает "4,55"
• Хорошо, я могу заменить запятую на точку и получить правильное число с плавающей запятой

Каковы «лучшие практики» в таких ситуациях, когда пользователь может использовать запятую или точку в качестве десятичного разделителя, а я хочу сохранить тип ввода html как число, чтобы улучшить взаимодействие с пользователем?

Могу ли я преобразовать запятую в точку «на лету», привязав ключевые события, работает ли он с числовым вводом?

РЕДАКТИРОВАТЬ

Currenlty У меня нет решения, как получить значение с плавающей запятой (как строку или число) из ввода, тип которого установлен на число. Если конечный пользователь вводит «4,55», Chrome всегда возвращает «455», Firefox возвращает «4,55», что нормально.

Также весьма раздражает то, что в Android (проверенный эмулятор 4.2), когда я ввожу «4,55» в поле ввода и меняю фокус на другое место, введенное число обрезается до «4».

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

Например, мне нужны долларовые суммы, поэтому я указал следующий шаг:

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

Нет ничего плохого в использовании jQuery для получения значения, но вы сочтете полезным напрямую использовать DOM API для получения validity.validсвойства элементов .

У меня была аналогичная проблема с десятичной точкой, но я понял, что проблема возникла из-за стиля, который Twitter Bootstrap добавляет к числовому вводу с недопустимым значением.

Вот скрипка, демонстрирующая, что добавление stepатрибута заставляет его работать, а также проверка, действительно ли текущее значение:

• jsFiddle

TL; DR: установите для stepатрибута a значение с плавающей запятой, поскольку по умолчанию оно равно 1.

ПРИМЕЧАНИЕ . Запятая меня не проверяет, но я подозреваю, что если я установлю в настройках языка / региона моей ОС значение, в котором в качестве десятичного разделителя используется запятая, это сработает. * примечание в примечании *: этого не было для языка ОС / настроек клавиатуры * Немецкий * в Ubuntu / Gnome 14.04.

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

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

1. Использование атрибута pattern

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

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" name="my-num"
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

Примечание: кроссбраузерная поддержка сильно различается. Он может быть полным, частичным или отсутствовать.

2. Проверка JavaScript

Вы можете попробовать привязать простой обратный вызов, например, к onchange (и / или размыть ), которое либо заменит запятую, либо подтвердит все вместе.

3. Отключить проверку браузера ##

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

<input type="number" formnovalidate />

4. Комбинация ..?

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" 
           name="my-num" formnovalidate
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

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

По сути, вы, как веб-автор, не можете это контролировать. Некоторые обходные пути включают использование двух полей ввода с целыми числами. Это позволяет каждому пользователю вводить данные так, как вы ожидаете. Это не особо привлекательно, но будет работать в любом случае для всех пользователей.

Используйте valueAsNumberвместо .val().

ввод. valueAsNumber [= значение]

Возвращает число, представляющее значение элемента управления формы, если применимо; в противном случае возвращает null.
Можно установить, чтобы изменить значение.
Выдает исключение INVALID_STATE_ERR, если элемент управления не является ни датой, ни временем, ни числовым.

использует текстовый тип, но принудительно отображает цифровую клавиатуру

<input value="12,4" type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

тег inputmode - это решение

Я не нашел идеального решения, но лучшее, что я мог сделать, это использовать type = "tel" и отключить проверку html5 (formnovalidate):

<input name="txtTest" type="tel" value="1,200.00" formnovalidate="formnovalidate" />

Если пользователь поставит запятую, он будет выводить с запятой в каждом современном браузере, который я пробовал (последний FF, IE, edge, opera, chrome, рабочий стол Safari, android chrome).

Основная проблема:

• Пользователи мобильных устройств увидят клавиатуру своего телефона, которая может отличаться от цифровой.
• Хуже того, на клавиатуре телефона может даже не быть клавиши для запятой.

Для моего варианта использования мне нужно было только:

• Отобразите начальное значение через запятую (firefox удаляет его для type = number)
• Не провалить проверку html5 (если есть запятая)
• Считайте поле точно так же, как ввод (с возможной запятой)

Если у вас есть подобное требование, это должно сработать для вас.

Примечание: мне не понравилась поддержка атрибута pattern. Formnovalidate, кажется, работает намного лучше.

Когда вы вызываете, $("#my_input").val();он возвращается как строковая переменная. Так что используйте parseFloatи parseIntдля конвертации. Когда вы используете parseFloatсвой компьютер или телефон, САМ понимает значение переменной.

И, кроме того, вы можете преобразовать число с плавающей запятой в строку, используя toFixedаргумент, который имеет количество цифр, как показано ниже:

var i = 0.011;
var ss = i.toFixed(2); //It returns 0.01

Судя по всему, у браузеров все еще есть проблемы (хотя Chrome и Firefox Nightly все в порядке). У меня есть хитрый подход для людей, которым действительно нужно использовать числовое поле (возможно, из-за маленьких стрелок, которых нет в текстовых полях).

Мое решение

Я добавил keyupобработчик событий к вводу формы, отслеживал состояние и устанавливал значение, когда оно снова становится действительным.

Чистый фрагмент кода JS JSFIDDLE

var currentString = '';
var badState = false;
var lastCharacter = null;

document.getElementById("field").addEventListener("keyup",($event) => {
  if ($event.target.value && !$event.target.validity.badInput) {
          currentString = $event.target.value;
  } else if ($event.target.validity.badInput) {
    if (badState && lastCharacter && lastCharacter.match(/[\.,]/) && !isNaN(+$event.key)) {
      $event.target.value = ((+currentString) + (+$event.key / 10));
      badState = false;
    } else {
      badState = true;
    }
  }
  document.getElementById("number").textContent = $event.target.value;
  lastCharacter = $event.key;
});

document.getElementById("field").addEventListener("blur",($event) => {
	if (badState) {
    $event.target.value = (+currentString);
    badState = false;
		document.getElementById("number").textContent = $event.target.value;
  }
});

#result{
  padding: 10px;
  background-color: orange;
  font-size: 25px;
  width: 400px;
  margin-top: 10px;
  display: inline-block;
}

#field{
  padding: 5px;
  border-radius: 5px;
  border: 1px solid grey;
  width: 400px;
}

<input type="number" id="field" keyup="keyUpFunction" step="0.01" placeholder="Field for both comma separators">

<span id="result" >
 <span >Current value: </span>
 <span id="number"></span>
</span>

Угловой 9 фрагмент

@Directive({
  selector: '[appFloatHelper]'
})
export class FloatHelperDirective {
  private currentString = '';
  private badState = false;
  private lastCharacter: string = null;

  @HostListener("blur", ['$event']) onBlur(event) {
    if (this.badState) {
      this.model.update.emit((+this.currentString));
      this.badState = false;
    }
  }

  constructor(private renderer: Renderer2, private el: ElementRef, private change: ChangeDetectorRef, private zone: NgZone, private model: NgModel) {
    this.renderer.listen(this.el.nativeElement, 'keyup', (e: KeyboardEvent) => {
      if (el.nativeElement.value && !el.nativeElement.validity.badInput) {
        this.currentString = el.nativeElement.value;
      } else if (el.nativeElement.validity.badInput) {
        if (this.badState && this.lastCharacter && this.lastCharacter.match(/[\.,]/) && !isNaN(+e.key)) {
          model.update.emit((+this.currentString) + (+e.key / 10));
          el.nativeElement.value = (+this.currentString) + (+e.key / 10);
          this.badState = false;
        } else {
          this.badState = true;
        }
      }       
      this.lastCharacter = e.key;
    });
  }
  
}

<input type="number" matInput placeholder="Field for both comma separators" appFloatHelper [(ngModel)]="numberModel">

Моя рекомендация? Не используйте jQuery вообще. У меня была такая же проблема, как и у вас. Я обнаружил, что $('#my_input').val()всегда возвращает какой-то странный результат.

Попробуйте использовать document.getElementById('my_input').valueAsNumberвместо, $("#my_input").val();а затем используйте, Number(your_value_retrieved)чтобы попытаться создать число. Если значение равно NaN, вы точно знаете, что это не число.

Следует добавить, что когда вы пишете число на входе, ввод фактически принимает почти любой символ (я могу написать знак евро, доллар и все другие специальные символы), поэтому лучше всего получить значение, используя .valueAsNumberвместо использования jQuery.

Да, и кстати, это позволяет вашим пользователям добавлять интернационализацию (то есть: поддерживать запятые вместо точек для создания десятичных чисел). Просто позвольте Number()объекту создать что-то для вас, и это будет, так сказать, безопасно для десятичных чисел.

Похоже, вы хотели бы использовать toLocaleString () для числовых входов.

См. Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString для его использования.

Локализация чисел в JS также рассматривается в разделе "Интернационализация" (форматирование чисел "num.toLocaleString ()"), не работающем для Chrome.