html <输入类型= "text" /> 仅数字，具有最小值和最大值

Question

我正在尝试获取 min=" 和 max=" 属性在仅数字输入上工作。由于浏览器对本地化的支持很糟糕，因此使用<input type="number">是不可能的(点应该是千位分隔符，逗号作为小数分隔符，在输入和提交中)。 最佳情况下，在每个表单提交表单时，如果数字遵循模式并且在正确的范围内，它将检查这些特定字段，就像它对 type="number" 输入本身所做的那样。

或者，如果可能或更容易，我也愿意使用<input type="number" />，只要在 value="123,12"、用户输入和提交到服务器的值中都接受模式、货币符号，最重要的是逗号。

到目前为止，我使用 pattern="-？(\d+|\d{1,3}(\.\d{3})*)(，\d+)？"它已经验证了除最小值和最大值之外的输入。

预期的行为是，在<input type="text" pattern"-?(\d+|\d{1,3}(\.\d{3})*)(,\d+)?" min="0" max="1500" />上，它会允许我输入任何我想要的值，但在提交表单时，请检查字段的数字解析值(省略货币符号或点，将逗号理解为十进制)是否在 0 到 1500 之间。最佳情况下，但这并不重要，我还想要带有step="0.01"的递增和递减箭头，例如类型="数字"输入。

可悲的是，我完全不知道如何在每个字段的基础上实现这一点，而不是在每个表单订阅按钮上运行全局 javascript，如果不是每个输入都符合条件，则阻止默认值。但即使我这样做了，我将如何显示type="number"会给我的正确(本地化)警告？

Answer 1

$("input[data-type='currency']").on({
keyup: function() {
formatCurrency($(this));
},
blur: function() { 
validateCurrency($(this));
formatCurrency($(this), "blur");
}
});
function validateCurrency(input){
var c = parseFloat(input.val().replace(/,|$/g,'').replace('$',''));
if(c<input.attr('min')){
input.val(input.attr('min'));
}else if(c>input.attr('max')){
input.val(input.attr('max'));
}
}
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);
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="currency-field" id="currency-field" pattern="^$d{1,3}(,d{3})*(.d+)?$" value="" data-type="currency" min="1000" max="1000000" placeholder="$200,000.00">
Minimum: 1000, Maximum: 1,000,000

编码者：韦德·威廉姆斯@559wade

调整：我刚刚添加了validateCurrency()函数并在blur事件上执行它以检查min和max