html5货币输入

Question

我似乎无法计算出用于接受表格上货币价值的内容。

我尝试过...

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

但是那将不允许便士进入。

我希望增量按钮控件以磅为单位，但仍然希望能够输入便士。

谁想使用一次移动1p的增量按钮？

也许我使用了错误的控件，但找不到货币/货币控件？

有人可以建议使用HTML5接受货币值（包括逗号，小数位和货币符号）的最佳方法吗？

谢谢，1DMF

Answer 1

为了在HTML5数字输入上允许使用分数（分），您需要将“ step”属性指定为=“ any”：

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

当输入十进制/小数货币时，这将特别防止Chrome显示错误。 Mozilla，IE等...如果忘记指定step="any"，也不会出错。 W3C规范指出，确实需要step =“ any”来允许小数。因此，您绝对应该使用它。

此外，数字输入现在已得到广泛支持（> 90％的用户）。

Answer 2

尝试使用step="0.01"，则每次将花费一分钱。

例如：

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

Answer 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' />

Answer 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>

[整个浏览器的验证有点不稳定，其中IE / FF允许逗号和小数位（只要是.00），而Chrome / Opera则不允许，只希望数字。

我猜很遗憾，JQuery微调器不能与数字类型输入一起使用，但是文档明确声明不这样做：-(而且我很困惑为什么数字微调器小部件允许输入任何ascii字符？

Answer 5

由于<input type="number" />无法显示欧元的十进制和逗号格式，因此我们在接受欧元的货币值时遇到了相同的问题。

我们提出了一个解决方案，可以使用<input type="number" />进行用户输入。用户输入值后，我们将其格式化并通过切换为<input type="text" />来显示为欧元格式。不过，这是一个Javascript解决方案，因为您需要一个条件来决定“用户正在键入”和“显示给用户”两种模式。

这里是Visuals与我们的解决方案的链接：Input field type "Currency" problem solved

希望这会有所帮助！

Answer 6

我使用“金钱”输入

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