Можете ли вы ввести "1.00" вместо 1 в поле номер типа ввода?

#javascript #html #polymer-1.0

#javascript #HTML #полимер-1.0

Вопрос:

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

Поэтому вместо значения по умолчанию just 1 я хочу всегда показывать его как 1.00 . Я получил бумажный ввод в step="1" or четный step="0.01" , но каждый раз, когда значение является целым числом, оно не отображается 1.00

 <paper-input id="taxPercent" min="0" max="99" step="1.00" on-change="_onVariablesChanged" value="0.00"> Tax Percent</paper-input>

 _onVariablesChanged: function (event){
 let value = event.target.value; 
 value = parseFloat(value).toFixed(2);
}

Ответ №1:

Когда входные данные обновляются, проверьте . , найдено ли значение a.

Если это так, нет необходимости что-то менять.
Если нет, добавьте .00 в конце.

 document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('input').addEventListener('input', update);
});

function update() {
  if (/./.test(this.value) === false) {
    this.value = `${this.value}.00`;
  }
}

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

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

Ответ №2:

Вы можете использовать прослушиватель событий, чтобы определить, когда изменяется значение. input.value будет строка, но добавление a преобразует ее в число. У Numbers есть toFixed() метод (mdn), который форматирует числа так, чтобы они содержали определенное число десятичной точности.

 const input = document.querySelector('input');
input.addEventListener('input', () =>
  input.value = ( input.value).toFixed(2));

 <input type="number" min="1">