html5货币/货币输入

Question 1

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

我努力了...

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

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

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

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

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

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

谢谢，1DMF

Question 2

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

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

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

当将十进制/小数货币输入到输入中时，这将特别防止Chrome显示错误。Mozilla，IE等...如果忘记指定，请不要出错step="any"。W3C规范指出，确实需要step =“ any”来允许小数。因此，您绝对应该使用它。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/number#step

请注意，如果希望向上/向下按钮执行特定的粒度设置，则必须指定数字步长，例如“ .01”。

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

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

此后，问题的标题发生了变化，含义有所不同。为了接受金钱/小数，可以同时使用数字或文本输入。

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

主要原因是它会自动强制用户输入有效的标准货币格式，并且禁止使用任何字母数字文本。话虽如此，您当然可以使用常规文本输入并进行一些后期处理以仅获取数字/十进制值（有时还应在服务器端进行验证）。

OP详细说明了货币符号和逗号的要求。如果您想要这样更高级的逻辑/格式（从2020年开始），则需要为文本输入创建自定义JS逻辑或找到一个插件。

Question 3

尝试使用step="0.01"，则每次都会花费1美分。

例如：

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

展开摘要

Question 4

使用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 
    ? localStringToNumber(value).toLocaleString(undefined, options)
    : ''
}

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

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

展开摘要

Question 5

最终，我不得不妥协以实现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字符？

Question 6

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

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

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

希望这会有所帮助！

Question 7

如果您拥有vue.js v-money-spinner，则更加轻松，美丽：)

Question 8

var currencyInput = document.querySelector('input[type="currency"]')
var currency = 'USD' // 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 
    ? localStringToNumber(value).toLocaleString(undefined, options)
    : ''
}

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

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