设置 < input type = “ number”/> 中的货币值

小开

将 step="0.01"添加到 <input type="number" />参数:

<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />

演示: http://jsfiddle.net/uzbjve2u/

但是美元符号必须保持在文本框之外... 每个非数字或分隔符字符将被自动裁剪。

否则，您可以使用经典的文本框就像这里描述的。

小开

浏览器只允许在类型设置为“ number”时输入数字。

您可以使用 type = “ text”并使用 JavaScript就像这里描述的过滤掉除数值输入以外的任何输入

小开

似乎您需要两个字段，货币的选择列表和值的数字字段。

在这种情况下，一种常见的技术是使用 div 或 span 来显示(屏幕外的表单字段) ，然后单击切换到表单元素进行编辑。

小开

最佳答案

最后，我做了一个 jQuery 插件，它可以适当地为我格式化 <input type="number" />。我还注意到，在一些移动设备上，min和 max属性实际上并不阻止你输入比指定数字更低或更高的数字，所以插件也会考虑到这一点。下面是代码和一个示例:

(function($) {
$.fn.currencyInput = function() {
this.each(function() {
var wrapper = $("<div class='currency-input' />");
$(this).wrap(wrapper);
$(this).before("<span class='currency-symbol'>$</span>");
$(this).change(function() {
var min = parseFloat($(this).attr("min"));
var max = parseFloat($(this).attr("max"));
var value = this.valueAsNumber;
if(value < min)
value = min;
else if(value > max)
value = max;
$(this).val(value.toFixed(2));
});
});
};
})(jQuery);


$(document).ready(function() {
$('input.currency').currencyInput();
});

.currency {
padding-left:12px;
}


.currency-symbol {
position:absolute;
padding: 2px 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" class="currency" min="0.01" max="2500.00" value="25.00" />

小开

你们是完全正确的数字只能进入数字领域。我在 span 标签上使用了一些 css 样式，使用了与上面列出的完全相同的内容:

<span>$</span><input type="number" min="0.01" step="0.01" max="2500" value="25.67">

然后再加上一点造型的魔力:

span{
position:relative;
margin-right:-20px
}
input[type='number']{
padding-left:20px;
text-align:left;
}

小开

这个代码片段自动将数字格式化为货币并加上美元符号的前缀。

<div class="main">
<h1>Auto Formatting Currency</h1>
  

<form method="post" action="#">
<label for="currency-field">Enter Amount</label>
<input type="text" name="currency-field" id="currency-field" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$" value="" data-type="currency" placeholder="$1,000,000.00">
<button type="submit">Submit</button>
</form>


<p>Auto format currency input field with commas and decimals if needed. Text is automatically formated with commas and cursor is placed back where user left off after formatting vs cursor moving to the end of the input. Validation is on KeyUp and a final validation is done on blur.</p>


<p>To use just add the following to an input field:</p>
  

<pre>data-type="currency"</pre>
  

</div><!-- /main -->


html {
box-sizing: border-box;
}


*, *:before, *:after {
box-sizing: inherit;
}




body {
background: #f5f5f5;
color: #333;
font-family: arial, helvetica, sans-serif;
font-size: 32px;
}


h1 {
font-size: 32px;
text-align: center;
}


p {
font-size: 20px;
line-height: 1.5;
margin: 40px auto 0;
max-width: 640px;
}


pre {
background: #eee;
border: 1px solid #ccc;
font-size: 16px;
padding: 20px;
}


form {
margin: 40px auto 0;
}


label {
display: block;
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}


input {
border: 2px solid #333;
border-radius: 5px;
color: #333;
font-size: 32px;
margin: 0 0 20px;
padding: .5rem 1rem;
width: 100%;


}


button {
background: #fff;
border: 2px solid #333;
border-radius: 5px;
color: #333;
font-size: 16px;
font-weight: bold;
padding: 1rem;
}


button:hover {
background: #333;
border: 2px solid #333;
color: #fff;
}


.main {
background: #fff;
border: 5px solid #ccc;
border-radius: 10px;
margin: 40px auto;
padding: 40px;
width: 80%;
max-width: 700px;
}


// Jquery Dependency


$("input[data-type='currency']").on({
keyup: function() {
formatCurrency($(this));
},
blur: function() {
formatCurrency($(this), "blur");
}
});




function formatNumber(n) {
// format number 1000000 to 1,234,567
return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}




function formatCurrency(input, blur) {
// appends $ to value, validates decimal side
// and puts cursor back in right position.
  

// get input value
var input_val = input.val();
  

// don't validate empty input
if (input_val === "") { return; }
  

// original length
var original_len = input_val.length;


// initial caret position
var caret_pos = input.prop("selectionStart");
    

// check for decimal
if (input_val.indexOf(".") >= 0) {


// get position of first decimal
// this prevents multiple decimals from
// being entered
var decimal_pos = input_val.indexOf(".");


// split number by decimal point
var left_side = input_val.substring(0, decimal_pos);
var right_side = input_val.substring(decimal_pos);


// add commas to left side of number
left_side = formatNumber(left_side);


// validate right side
right_side = formatNumber(right_side);
    

// On blur make sure 2 numbers after decimal
if (blur === "blur") {
right_side += "00";
}
    

// Limit decimal to only 2 digits
right_side = right_side.substring(0, 2);


// join number by .
input_val = "$" + left_side + "." + right_side;


} else {
// no decimal entered
// add commas to number
// remove all non-digits
input_val = formatNumber(input_val);
input_val = "$" + input_val;
    

// final formatting
if (blur === "blur") {
input_val += ".00";
}
}
  

// send updated string to input
input.val(input_val);


// put caret back in the right position
var updated_len = input_val.length;
caret_pos = updated_len - original_len + caret_pos;
input[0].setSelectionRange(caret_pos, caret_pos);
}

Https://codepen.io/akalkhair/pen/dypaozz