html - 用于货币/货币的 html5 输入

Question

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

我努力了...

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

但这将不允许便士条目。

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

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

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

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

score 89 · Accepted Answer

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

为了在 HTML5 数字输入中允许分数（美分），您需要将“step”属性指定为 =“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 逻辑或查找插件。

score 69 · Accepted Answer

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

例如：

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

score 41 · Accepted Answer

使用 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' />

这是一个非常简单的演示，说明了上述方法（仅限 HTML）

如果有人感兴趣，我制作了一个很小的React组件

score 2 · Accepted Answer

好吧，最后我不得不通过实现 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 字符？

score 2 · Accepted Answer

我偶然发现了这篇文章，正在寻找类似的答案。我阅读了@vsync example Using javascript's Number.prototype.toLocaleString:，它似乎运行良好。我唯一的抱怨是，如果你的页面中有多个，input type="currency"它只会修改它的第一个实例。

正如他在评论中提到的那样，它只是作为 stackoverflow 的示例而设计的。

然而，这个例子对我来说效果很好，虽然我对 JS 的经验很少，但我想出了如何修改它，以便它可以input type="currency"在页面上使用document.querySelectorAll而不是document.querySelector添加一个 for 循环。

我希望这对其他人有用。（大部分代码的功劳是@vsync）

var currencyInput = document.querySelectorAll( 'input[type="currency"]' );

for ( var i = 0; i < currencyInput.length; i++ ) {

    var currency = 'GBP'
    onBlur( {
        target: currencyInput[ i ]
    } )

    currencyInput[ i ].addEventListener( 'focus', onFocus )
    currencyInput[ i ].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 ) :
            ''
    }
}

    var currencyInput = document.querySelectorAll( 'input[type="currency"]' );

    for ( var i = 0; i < currencyInput.length; i++ ) {

        var currency = 'GBP'
        onBlur( {
            target: currencyInput[ i ]
        } )

        currencyInput[ i ].addEventListener( 'focus', onFocus )
        currencyInput[ i ].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_date {
    margin:1px 0px 50px 0px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #111;
    display: block;
    background: #ddd;
    height: 50px;
    border-radius: 5px;
    border: 2px solid #111111;
    padding: 0 20px 0 20px;
    width: 100px;
}

    <label for="cost_of_sale">Cost of Sale</label>
    <input class="input_date" type="currency" name="cost_of_sale" id="cost_of_sale" value="0.00">

    <label for="sales">Sales</label>
    <input class="input_date" type="currency" name="sales" id="sales" value="0.00">

     <label for="gm_pounds">GM Pounds</label>
     <input class="input_date" type="currency" name="gm_pounds" id="gm_pounds" value="0.00">

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

0

如果你有 vue.js v-money-spinner会更简单更漂亮:)

于 2020-09-13T20:27:57.943 回答

score -4 · Accepted Answer

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

html - 用于货币/货币的 html5 输入

8 回答 8

使用 javascript 的Number.prototype.toLocaleString：

Related

Reference