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 type='currency' />

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 char？

Answer 5

我偶然发现了这篇文章，正在寻找类似的答案。我阅读了@vsync 示例 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">

Answer 6

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

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

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

希望这会有所帮助！

Answer 7

我使用“货币”输入

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

Answer 8

如果您拥有vue.js v-money-spinner ：）

Answer 9

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

html5输入货币/货币

9 个答案:

使用javascript的Number.prototype.toLocaleString：