Я будую веб-додаток, в основному для мобільних браузерів. Я використовую поля введення з типом номера, тому (більшість) мобільних браузерів використовує лише цифрову клавіатуру для кращого користування. Цей веб-додаток використовується в основному в регіонах, де десятковий роздільник є комою, а не крапкою, тому мені потрібно обробляти обидва десяткових роздільника.

Як прикрити весь цей безлад крапкою і комою?

Мої висновки:

Настільний 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 як число, щоб забезпечити кращу роботу користувачів?

Чи можу я перетворити кому в крапку "на льоту", прив'язуючи ключові події, чи працює вона з введеннями чисел?

EDIT

Currenlty У мене немає рішення, як отримати значення float (як рядок або число) з введення, тип якого встановлений на число. Якщо ендузер вводить "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 для отримання значення, але вам буде корисно використовувати API DOM безпосередньо для отримання validity.validвластивості елементів .

У мене була схожа проблема з десятковою крапкою, але причина, коли я зрозумів, що виникла проблема, пов’язана із стилем, який Twitter Bootstrap додає до введення числа з недійсним значенням.

Ось загадка, яка демонструє, що додавання stepатрибуту змушує його працювати, а також перевіряє, чи є поточне значення дійсним:

• jsFiddle

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

ПРИМІТКА . Кома для мене не підтверджується, але я підозрюю, що якби я встановив налаштування мови / регіону ОС десь, де використовується кома як десятковий роздільник, вона буде працювати. * Примітка у примітці *: це не стосувалося мови / налаштувань клавіатури * Німецька * в Ubuntu / Gnome 14.04.

Відповідно до w3.org атрибут значення вводу числа визначається як число з плаваючою комою . Синтаксис числа з плаваючою комою, здається, приймає лише крапки як десяткові роздільники.

Я перерахував кілька варіантів нижче, які можуть бути корисними для вас:

1. Використання атрибута шаблону

За допомогою атрибуту шаблону ви можете вказати дозволений формат із регулярним виразом сумісним чином 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, край, опера, хром, сафарі на робочому столі, андроїд хром).

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

• Користувачі мобільних пристроїв побачать клавіатуру телефону, яка може відрізнятися від цифрової клавіатури.
• Ще гірше, що клавіатура телефону може навіть не мати клавіші для коми.

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

• Показуйте початкове значення комою (firefox викреслює його для типу = число)
• Не пропустити перевірку html5 (якщо є кома)
• Нехай поле читається точно як вхідне (з можливою комою)

Якщо у вас є подібні вимоги, це повинно працювати для вас.

Примітка: мені не сподобалася підтримка атрибута шаблону. Здається, формановалідат працює набагато краще.

При виклику $("#my_input").val();він повертається у вигляді змінної рядка. Тож використовуйте parseFloatі parseIntдля перетворення. Під час використання parseFloatробочого столу чи телефону ITSELF розуміє значення змінної.

І плюс ви можете перетворити поплавок на рядок, використовуючи toFixedякий має аргумент кількість цифр, як показано нижче:

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

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

Моє рішення

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

Чистий JS Snippet 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.

О, і BTW, що дозволяє вашим користувачам додавати інтернаціоналізацію (тобто: підтримувати коми замість крапок для створення десяткових чисел). Просто дозвольте Number()об'єкту створити щось для вас, і це буде безпечно для десятків, так би мовити.

Здається, ви хочете використовувати toLocaleString () на цифрових входах.

Див. Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString щодо його використання.

Локалізація чисел у JS також охоплюється в інтернаціоналізації (форматування чисел "num.toLocaleString ()"), що не працює для хромування