限制html5中小数的数量type="number"输入字段(使用Angularjs模型)
Restrict number of decimals in html5 type="number" input field (with Angularjs model)
请找到小提琴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>
如何将INPUT字段中的小数点限制为2位?与示例中一样,{{val | number:2}}
可以工作,但不确定如何使用它来格式化附加到字段的ng-model。我可以格式化数据/模型本身,但我有几个值,我喜欢保留额外的小数,但只显示2十进制。
谢谢。
你可以写一个指令来控制这个功能。它不是angular自带的,但是指令可以控制页面的外观和工作方式。
我写了一个简单的:http://jsfiddle.net/q2SgJ/8/
就是这个链接函数:
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();
}
});
}
将输入限制为小数点后2位,但不会将输入格式化为小数点后2位。无论如何,这是一个起点。我相信你可以查找其他的例子,并编写自己的指令来处理这个你想要的方式。Angular的特点是,它不是一个能回答所有问题的框架,而是一个允许你创建比HTML5单独提供的功能更多的功能的框架,并且使它非常简单。
不需要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>
我对已接受的答案进行了扩展,以便在确定要限制小数位数时查看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();
}
}
});
}
};
});
我已经扩展了Tim's fiddle,以防有人正在寻找工作解决方案
http://jsfiddle.net/q2SgJ/653/修改了按键事件,以根据光标位置检索原始键入的值
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();
}
}
}
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 而循环只设置php中输入字段中的第一个值
- 在输入字段中将最小金额设置为
- 从Rally获取一个特定的标记,以便计算另一个字段中的值
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 在wordpress一定时间后更改自定义字段
- 如何在HTML输入字段中添加不可删除的后缀
- Meteor-添加用户自定义字段的方法不起作用
- 互斥单选按钮和相应的输入字段
- 强制URL字段不具有“;http://www."使用regex
- 获取"空”;当字段为空时
- "未捕获的类型错误:未定义的不是函数“;当向输入字段添加值时
- "如何使用jQuery's form.serialize但排除空字段"不起作用(使用php)
- 如何隐藏所有下一个"字段集“;元素使用jQuery
- 如何生成所有输入名称的列表=“"使用Javascript/JQuery的表单中的字段
- 使用<重置所有字段(复选框、文本、选择);body onload()">
- “Only"数量;带逗号分隔符的字段
- 我怎么能隐藏形式字段(城市& quot;状态),直到zip被填充
- ";msg":"分析JSON字段值时出错.意外的OBJECT_START