货币/货币的html5输入

Question

我似乎不知道该用什么来接受表单上的货币值。

我试过了..。

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

但这样就不允许输入便士了。

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

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

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

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

Answer 1

为数字输入启用小数/分/小数

为了允许在步骤数字输入上使用小数(美分)，您需要指定“HTML5”属性= "any"：

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

这将特别防止Chrome在输入小数/分数货币时显示错误。Mozilla、IE等如果忘记指定step="any"，请不要出错。W3C规范指出，step="any“实际上应该允许使用小数。所以，你一定要使用它。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step

请注意，如果您希望向上/向下按钮执行特定的粒度，则必须指定一个数值步长，如".01“。

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

货币/货币有哪些输入选项？

自那以后，问题的标题发生了变化，并呈现出略有不同的含义。为了接受货币/小数，可以同时使用数字或文本输入。

对于货币/货币的输入字段，建议使用数字输入类型并指定如上所述的适当属性。到2020年为止，还没有针对货币或货币的实际输入类型的W3C规范。

主要原因是它自动强制用户输入有效的标准货币格式，并禁止任何字母数字文本。也就是说，您当然可以使用常规文本输入并进行一些后处理，以仅获取数字/十进制值(在某些时候也应该对此进行服务器端验证)。

OP详细说明了货币符号和逗号的要求。如果你想要更花哨的逻辑/格式化(从2020年开始)，你需要为文本输入创建自定义JS逻辑，或者找到一个插件。

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

 // format inital value
onBlur({target:currencyInput})

// bind event listeners
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

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

input{
  padding: 10px;
  font: 20px Arial;
  width: 70%;
}

<input type='currency' value="123" placeholder='Type a number & click outside' />

​

说明上述方法的Here's a very simple demo (仅限HTML)

如果有人感兴趣的话，我做了一个小小的 component