Html5货币/货币输入

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

我试过了。

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

但那样就不允许进行便士输入了。

我想增量按钮控制上升英镑，但仍然希望能够输入便士。

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

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

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

396248 次浏览
小开

最后我不得不妥协，实现了一个 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 spinner 不能处理数字类型的输入，但是文档明确指出不能这样做: ——我很困惑为什么一个数字 spinner 小部件允许任何 ascii 字符的输入？

小开

使用分数/分数/Decimals 输入数字

要在数字输入中允许使用分数，需要将 step属性指定为 any:

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

This will specifically keep Chrome from displaying an error when a decimal/fractional currency is entered into the input. Mozilla, IE, etc... don't error out if you forget to specify step="any". W3C spec states that step="any" should, indeed, be needed to allow for decimals. So, you should definitely use it. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step

Note that if you want the up/down buttons to do a specific granularity, then you must specify a numeric step such as ".01".

Also, the number input is now pretty widely supported (>90% of users).

What Input Options are there for Money/Currency?

The title of the question has since changed and takes on a slightly different meaning. One could use both number or text input in order to accept money/decimals.

For an input field for currency/money, it is recommended to use input type of number and specify appropriate attributes as outlined above. As of 2020, there is not a W3C spec for an actual input type of currency or money.

Main reason being it automatically coerces the users into entering a valid standard currency format and disallows any alphanumeric text. With that said, you could certainly use the regular text input and do some post processing to only grab the numeric/decimal value (there should be server side validation on this at some point as well).

The OP detailed a requirement of currency symbols and commas. If you want fancier logic/formatting like that, (as of 2020) you'll need to create custom JS logic for a text input or find a plugin.

小开

尝试使用 step="0.01"，然后它会一步一便士每次。

eg:

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

小开

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

We came up with a solution, to use <input type="number" /> for user input. After user types in the value, we format it and display as a Euro format by just switching to <input type="text" />. This is a Javascript solution though, cuz you need a condition to decide between "user is typing" and "display to user" modes.

Here the link with Visuals to our solution: 输入字段类型“货币”问题解决

希望这对你有所帮助！

小开

使用 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 illustrating the above method (HTML-only)

I've made a tiny React component if anyone's interested

小开 

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

小开

如果你有 vue.js 翻译: 奇芳，校对: 奇芳，校对: 奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳，奇芳:) ，就更容易和漂亮了

enter image description here

小开

我偶然发现了这篇文章，希望找到类似的答案。我读了@vsync 的例子 使用 javascript 的 Number.Prototype.toLocaleString:，它似乎工作得很好。我唯一的抱怨是，如果您的页面中有多个 input type="currency"，那么它只会修改它的第一个实例。

正如他在评论中提到的那样，它只是作为堆栈溢出的一个例子而设计的。

However, the example worked well for me and although I have little experience with JS I figured out how to modify it so that it will work with multiple input type="currency" on the page using the document.querySelectorAll rather than document.querySelector and adding a for loop.

我希望这对其他人也有用(大部分代码是@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">

小开 

var currencyInput = document.querySelector('input[type="currency"]')
var currency = 'ARG' // 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' />


提交答案