作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个自定义指令,将输入限制为特定符号,在我的例子中,仅限数字。它是在 filters on ng-model in an input 之后制作的在文本类型的 inpit 中工作得很好。
指令声明为
.directive('onlydigitinput', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
var transformedInput = inputValue.toLowerCase().replace(/ /g, '').replace(/[^0-9]+/g, '');
if (transformedInput != inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
};
})
但在数字输入的情况下,我想使用输入 type=number,而不是 type=text:
<input type="number"
onlydigitinput="onlydigitinput" required="required" min="1" max="99" maxlength="2">
然后这是一个问题:我有基于最小-最大属性的正确验证,但我仍然可以输入所有符号,例如字母,并且指令无法正常工作。此外, maxlength 似乎没有效果。我如何修复我的指令以使用 type="number"输入?
最佳答案
这里有两个问题。首先,maxlength
属性不适用于输入类型 number
。参见例如 maxlength ignored for input type=“number” in Chrome .
其次,当输入类型为 number
时,指令的函数仅在 inputValue
参数为数字时获取该值。请参阅this fiddle作为示例(控制台输出可能会更清楚)。
编辑:
使用数字类型输入对您来说有多重要?如果浏览器添加到输入字段的微调控件不是必需的,我可能会选择如下所述的自定义类型:How to create a custom input type?
我使用过非常相似的东西,例如资金输入字段(带有本地化的小数分隔符等)。
关于javascript - 指令限制输入不适用于 type=number,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23953010/
我是一名优秀的程序员,十分优秀!