Html 限制 html5 type="number" 输入字段中的小数位数（使用 Angularjs 模型）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16134391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Restrict number of decimals in html5 type="number" input field (with Angularjs model)
提问by bsr
Please find the fiddle http://jsfiddle.net/q2SgJ/5/
请找到小提琴 http://jsfiddle.net/q2SgJ/5/
<div ng-app="">
<div ng-controller="Ctrl">
WANTS: {{val | number:2}} in "input" elelent<br>
2 decimal in input: <input ng-model='val'> <br>
2 decimal in input: <input type="number" step="0.01" ng-model='val'><br>
2 decimal in input: <input ng-model='val' value="{{val |number:2}}"> <br>
</div>
</div>
How can I restrict the decimal places to 2 digits in an INPUT field. As in the example {{val | number:2}}works, but not sure how to use it to format the ng-model attached to an field. I could have formatted the data/model itself, but I have few values I like to keep the extra decimal, but only display 2 decimal.
如何将 INPUT 字段中的小数位限制为 2 位。如示例中所示{{val | number:2}}，但不确定如何使用它来格式化附加到字段的 ng-model。我可以格式化数据/模型本身，但我没有多少值我想保留额外的小数，但只显示 2 个小数。
Thanks.
谢谢。
采纳答案by Tim Withers
You can write a directive to control this functionality. It is not something that ships with angular, but directives can control how things look and work on the page.
您可以编写指令来控制此功能。它不是 angular 附带的东西，但指令可以控制页面上的外观和工作方式。
I wrote a simple one: http://jsfiddle.net/q2SgJ/8/
我写了一个简单的：http: //jsfiddle.net/q2SgJ/8/
This is the linking function that does the trick:
这是可以解决问题的链接函数：
link:function(scope,ele,attrs){
ele.bind('keypress',function(e){
var newVal=$(this).val()+(e.charCode!==0?String.fromCharCode(e.charCode):'');
if($(this).val().search(/(.*)\.[0-9][0-9]/)===0 && newVal.length>$(this).val().length){
e.preventDefault();
}
});
}
This works at limiting the input to 2 decimal places, but doesn't format the input to two decimal places. Anyways, it is a starting point. I am sure you can look up other examples and write your own directive to handle this the way you want. The thing about Angular is that it is not a framework with an answer to every question, but a framework that allows you to create additional functionality than what HTML5 provides alone and makes it very simple.
这适用于将输入限制为两位小数，但不会将输入格式化为两位小数。无论如何，这是一个起点。我相信您可以查找其他示例并编写自己的指令以按照您想要的方式处理此问题。关于 Angular 的事情是，它不是一个可以回答所有问题的框架，而是一个框架，它允许您创建比 HTML5 单独提供的功能更多的功能并使其变得非常简单。
回答by JabberwockyDecompiler
You can do this without JQuery, and without a directive. Your original attempt with step was very close. I found this sitethat shows how to use HTML5 inputs to restrict using the step and AngularJS regular expression input filters.
您可以在没有 JQuery 且没有指令的情况下执行此操作。您最初对 step 的尝试非常接近。我发现这个站点展示了如何使用 HTML5 输入来限制使用 step 和 AngularJS 正则表达式输入过滤器。
<div ng-app="app">
<div ng-controller="Ctrl"> @*Just an empty controller in this example*@
<form name="myForm">
<input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" /><br />
Is a valid decimal?<span ng-show="!myForm.myDecimal.$valid">{{myForm.myDecimal.$valid}}</span>
</form>
</div>
</div>
回答by dkellycollins
I expanded on the accepted answer to look at the step attribute when determining how many decimal places to limit.
在确定要限制的小数位数时，我扩展了已接受的答案以查看 step 属性。
directive('forcePrecision', function () {
return {
restrict: 'A',
scope: {
step: '@'
},
link: function (scope, element, attrs) {
if (!scope.step || scope.step == 'any') {
return;
}
var prec = 1;
for (var i = scope.step; i != 1; i *= 10) {
prec *= 10;
}
element.on('keypress', function (e) {
var val = Number(element.val() + (e.charCode !== 0 ? String.fromCharCode(e.charCode) : ''));
if (val) {
var newVal = Math.floor(val * prec) / prec;
if (val != newVal) {
e.preventDefault();
}
}
});
}
};
});
回答by Casey
I have extended the Tim's fiddle incase some one is looking for working solution
我已经扩展了蒂姆的小提琴，以防有人正在寻找可行的解决方案
http://jsfiddle.net/q2SgJ/653/
http://jsfiddle.net/q2SgJ/653/
modified the keypress event to retrieve the original typed value based on the cursor position
修改按键事件以根据光标位置检索原始键入值
ele.bind('keypress',function(e){
var value = $(this).val();
var decimalPointPosition = value.indexOf(".");
if(!((e.charCode === 46) || (e.charCode > 47 && e.charCode <= 57)))
e.preventDefault();
else if (decimalPointPosition >= 0) {
var decimalCount = value.substring(decimalPointPosition + 1).length;
if ((decimalCount == 2 && $(this).prop("selectionStart") > decimalPointPosition)) {
e.preventDefault();
}
}
}
