Задайте значение для валюты в <input type = "number" /">

Я пытаюсь отформатировать ввод номера пользователем в валюту с помощью javascript. Это отлично работает на <input type="text" />. Однако в <input type="number" /> я не могу установить значение для чего-либо, содержащего нечисловые значения. Следующая скрипка показывает мою проблему

http://jsfiddle.net/2wEe6/72/

В любом случае мне нужно установить значение на что-то вроде $125.00?

Я хочу использовать <input type="number" />, чтобы мобильные устройства знали, чтобы вызвать клавиатуру для ввода номера.

Ответ 1

В итоге я создал плагин jQuery, который будет соответствующим образом форматировать <input type="number" /> для меня. Я также заметил, что на некоторых мобильных устройствах атрибуты min и max на самом деле не мешают вам вводить более низкие или более высокие номера, чем указано, поэтому плагин также будет учитывать это. Ниже приведен код и пример:

(function($) {
  $.fn.currencyInput = function() {
    this.each(function() {
      var wrapper = $("<div class='currency-input' />");
      $(this).wrap(wrapper);
      $(this).before("<span class='currency-symbol'>$</span>");
      $(this).change(function() {
        var min = parseFloat($(this).attr("min"));
        var max = parseFloat($(this).attr("max"));
        var value = this.valueAsNumber;
        if(value < min)
          value = min;
        else if(value > max)
          value = max;
        $(this).val(value.toFixed(2)); 
      });
    });
  };
})(jQuery);

$(document).ready(function() {
  $('input.currency').currencyInput();
});

.currency {
  padding-left:12px;
}

.currency-symbol {
  position:absolute;
  padding: 2px 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" class="currency" min="0.01" max="2500.00" value="25.00" />

Ответ 2

Добавьте step="0.01" в параметры <input type="number" />:

<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />

Демо: http://jsfiddle.net/uzbjve2u/

Но знак доллара должен оставаться вне текстового поля... каждый нечисловой или разделительный charachter будет обрезано автоматически.

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

Ответ 3

Вы, ребята, вполне правы, цифры могут поступать только в числовое поле. Я использую то же самое, что уже упоминалось с немного стилем CSS в теге span:

<span>$</span><input type="number" min="0.01" step="0.01" max="2500" value="25.67">

Затем добавьте немного магии стиля:

span{
  position:relative;
  margin-right:-20px
}
input[type='number']{
  padding-left:20px;
  text-align:left;
}

Ответ 4

Кажется, вам понадобятся два поля, список выбора для валюты и поле числа для значения.

Общей методикой в этом случае является использование div или span для отображения (поля формы вне экрана) и переключатели кликов для элементов формы для редактирования.

Ответ 5

Как видно из типа, вы можете вводить только цифры во вход

http://www.w3.org/TR/html-markup/input.number.html#input.number.attrs.type

Ответ 6

Браузер допускает только числовые входы, если тип установлен на "число". Подробности здесь.

Вы можете использовать type = "text" и отфильтровывать любые данные, кроме числового ввода, используя JavaScript как описано здесь