Html5 вход для денег/валюты

Кажется, я не могу понять, что использовать для принятия денежных значений в форме.

Я пробовал...

<input type="number" min="0" max="10000" step="1" name="Broker_Fees" id="broker_fees" required="required">

Но это не позволит записывать записи pence.

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

Кто хотел бы использовать инкрементную кнопку, которая перемещала 1p за раз?

Возможно, я использую неправильный контроль, но я не могу найти денежный/валютный контроль?

Кто-нибудь может посоветовать лучший способ принять денежные значения (включая запятые, десятичные знаки и символ валюты) с помощью HTML5?

Спасибо, 1DMF

Ответы

Ответ 1

Чтобы разрешить дроби (цента) на входе номера HTML5, вам нужно указать атрибут "step" для = "any":

<input type="number" min="1" step="any" />

Это заставит Chrome отображать ошибку, когда в ввод вводится десятичная/дробная валюта. Mozilla, IE и т.д. Не выходят из строя, если вы забыли указать step="any". Спецификация W3C заявляет, что step = "any" должен, действительно, понадобиться для десятичных знаков. Таким образом, вы обязательно должны его использовать.

Кроме того, ввод номера довольно широко поддерживается ( > 90% пользователей).

Ответ 2

Попробуйте использовать step="0.01", тогда он будет шаг за шагом до копейки каждый раз.

например:

<input type="number" min="0.00" max="10000.00" step="0.01" />

Ответ 3

Использование JavaScript Number.prototype.toLocaleString:

var currencyInput = document.querySelector('input[type="currency"]');
var currency = 'GBP'; // https://www.currency-iso.org/dam/downloads/lists/list_one.xml

currencyInput.addEventListener('focus', onFocus);
currencyInput.addEventListener('blur', onBlur);

function localStringToNumber( s ){
    return Number(String(s).replace(/[^0-9.-]+/g,""));
}

function onFocus(e){
  var value = e.target.value;
  e.target.value = value ? localStringToNumber(value) : '';
}

function onBlur(e){
  var value = e.target.value;

  const options = {
      maximumFractionDigits : 2,
      currency              : currency,
      style                 : "currency",
      currencyDisplay       : "symbol"
  }
  
  e.target.value = value 
    ? localStringToNumber(value).toLocaleString(undefined, options)
    : ''
}

input{
  padding: 10px;
  font: 20px Arial;
}

<input style='width:70%' type='currency' placeholder='Type a number & click outside' />

Ответ 4

Ну, в конце концов, мне пришлось пойти на компромисс, реализовав решение HTML5/CSS, отказавшись от кнопок инкремента в IE (они все равно немного сломались в FF!), но получили подтверждение количества, которое не поддерживает прядильщик JQuery. Хотя мне приходилось идти с целым числом чисел.

span.gbp {
    float: left;
    text-align: left;
}

span.gbp::before {
    float: left;
    content: "\00a3"; /* £ */
    padding: 3px 4px 3px 3px;
}

span.gbp input {
     width: 280px !important;
}

<label for="broker_fees">Broker Fees</label>
<span class="gbp">
    <input type="number" placeholder="Enter whole GBP (&pound;) or zero for none" min="0" max="10000" step="1" value="" name="Broker_Fees" id="broker_fees" required="required" />
</span>

Ответ 5

Я бы не стал полагаться на HTML5, поскольку тип ввода номера не получил широкого распространения, поэтому, даже если вы найдете решение, оно будет работать только для определенного браузера/версии.

рассмотрите использование jQueryUI Spinner

Посмотрите здесь (поддержка браузера) и здесь (спецификации) для более подробной информации.

Ответ 6

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

Мы придумали решение использовать <input type="number"/> для пользовательского ввода. После того как пользователь введет значение, мы отформатируем его и отобразим в формате евро, просто переключившись на <input type="text"/>. Это решение Javascript, потому что вам нужно условие для выбора между режимами "пользователь печатает" и "отображать пользователю".

Вот ссылка с Visuals на наше решение: Тип поля ввода "Валюта" решена проблема

Надеюсь, это поможет каким-то образом!

Ответ 7

Я использую ввод денег

<input type="money" name="price" size="6" value="<?php echo $price; ?>" /> €<br/>