html5输入货币/货币

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 style='width:70%' type='currency' placeholder='Type a number & click outside' />

Answer 4

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

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

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

我希望这对其他人有用。（大部分代码归功于@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 ) :
            ''
    }
}

    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;
}

Answer 5

最后我不得不妥协，实现 HTML5/CSS 解决方案，放弃 IE 中的增量按钮（无论如何，它们在 FF 中有点损坏！），但获得了 JQuery spinner 不提供的数字验证。尽管我不得不采取整数步骤。

\n\n

\r\n

\r\n

span.gbp {\r\n    float: left;\r\n    text-align: left;\r\n}\r\n\r\nspan.gbp::before {\r\n    float: left;\r\n    content: "\\00a3"; /* \xc2\xa3 */\r\n    padding: 3px 4px 3px 3px;\r\n}\r\n\r\nspan.gbp input {\r\n     width: 280px !important;\r\n}

\r\n

<label for="broker_fees">Broker Fees</label>\r\n<span class="gbp">\r\n    <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" />\r\n</span>

\r\n

\r\n

\r\n

\n\n

跨浏览器的验证有点不稳定，IE/FF 允许逗号和小数位（只要是 .00），而 Chrome/Opera 不允许，只需要数字。

\n\n

我想 JQuery 旋转器不能使用数字类型输入是一件遗憾的事，但文档明确指出不要这样做:-(并且我很困惑为什么数字旋转器小部件允许输入有ascii字符吗？

\n