html5输入货币/货币


html5 input for money/currency

我似乎无法弄清楚用什么来接受表格上的货币价值。

我努力了...

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

但那时便不允许便士入境。

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

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

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

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

谢谢，
1DMF

相关讨论

为了允许HTML5数字输入的分数(分)，您需要将"step"属性指定为="any"：

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

这将特别防止Chrome在输入中输入小数/小数货币时显示错误。 Mozilla，IE等...如果您忘记指定step="any"，请不要输出错误。 W3C规范指出，确实需要step ="any"来允许小数。所以，你绝对应该使用它。

此外，数字输入现在得到了广泛的支持(> 90％的用户)。

尝试使用step="0.01"，然后每次都会一步一步。

例如：

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

相关讨论

使用javascript的Number.prototype.toLocaleString：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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)
    : ''
}
1
2
3
4
input{
  padding: 10px;
  font: 20px Arial;
}
1
<input style='width:70%' type='currency' placeholder='Type a number & click outside' />

最后，我不得不通过实施HTML5 / CSS解决方案来妥协，在IE中放弃增量按钮(无论如何它们在FF中都有点破坏！)，但获得了JQuery微调器无法提供的数字验证。虽然我不得不采取整数的步骤。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}
1
2
3
4
<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字符？

相关讨论

我们在接受欧元的货币值方面遇到了同样的问题，因为不能显示欧元小数和逗号格式。

我们提出了一个解决方案，使用进行用户输入。用户输入值后，我们将其格式化，并通过切换到显示为欧元格式。这是一个Javascript解决方案，因为你需要一个条件来决定"用户正在打字"和"显示给用户"模式。

这里链接Visuals到我们的解决方案：
输入字段类型"货币"问题已解决

希望这在某种程度上有所帮助！

我用"钱"输入

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