不允许在字段中输入不需要的字符
not allowing unwanted characters to input in a field
我有一个文本字段,我只想在其中输入数字。我使用了 type ="number" 但我遇到了问题,因为我无法获得小数点。所以我使用了在线找到的指令来限制输入的字母。
app.directive('onlyNum', function() {
return function(scope, element, attrs) {
var keyCode = [8,9,37,39,48,49,50,51,52,53,54,55,56,57,110];
element.bind("keydown", function(event) {
console.log($.inArray(event.which,keyCode));
if($.inArray(event.which,keyCode) == -1) {
scope.$apply(function(){
scope.$eval(attrs.onlyNum);
event.preventDefault();
});
event.preventDefault();
}
});
};
})
它工作正常,但我可以输入诸如 @、$、!、#、& 等字符 on.How 我可以限制这些字符的输入吗?
keyCode
数组包含所有不需要的字符的 ASCII 代码。您可以在那里添加自己的数字,您可以从 ascii 图表中获取它们。例如@ = 64, $ = 36。请注意,大多数 ASCII 图表仅提供十六进制值,但数组包含十进制数。
编辑:This chart 还包含十进制数:
您可以侦听元素上的 input
事件,并通过定义 array
允许的字符并检查索引来查看是否允许最后输入的字符。如果该字符不允许,则将其删除:
var element = document.getElementById("inputfield");
var inputText = "";
var allowedInputs = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'];
element.oninput = function (event) {
if(allowedInputs.indexOf(element.value.slice(event.srcElement.selectionEnd - 1, event.srcElement.selectionEnd)) == -1)
element.value = element.value.substr(0, event.srcElement.selectionEnd - 1) + element.value.substr(event.srcElement.selectionEnd);
};
<input id="inputfield"/>
工作fiddle
您可以将要允许的所有字符添加到数组中。
编辑:我更新了代码,因此不能在现有字符之间输入任何不允许的字符。
这是我的自定义指令,可以使用 RegEx 轻松调整以满足任何需要
http://plnkr.co/edit/dgRJkVeX6iwIbXuoMVSW?p=preview
.directive("numberValidation", function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, ele, attrs, ctrl) {
ctrl.$parsers.unshift(function(value) {
if (value) {
var valid = value.match(/^\d+(,\d+)?$/)
ctrl.$setValidity('invalidNumber', valid);
}
return valid ? value : undefined;
});
}
}
});
我有一个文本字段,我只想在其中输入数字。我使用了 type ="number" 但我遇到了问题,因为我无法获得小数点。所以我使用了在线找到的指令来限制输入的字母。
app.directive('onlyNum', function() {
return function(scope, element, attrs) {
var keyCode = [8,9,37,39,48,49,50,51,52,53,54,55,56,57,110];
element.bind("keydown", function(event) {
console.log($.inArray(event.which,keyCode));
if($.inArray(event.which,keyCode) == -1) {
scope.$apply(function(){
scope.$eval(attrs.onlyNum);
event.preventDefault();
});
event.preventDefault();
}
});
};
})
它工作正常,但我可以输入诸如 @、$、!、#、& 等字符 on.How 我可以限制这些字符的输入吗?
keyCode
数组包含所有不需要的字符的 ASCII 代码。您可以在那里添加自己的数字,您可以从 ascii 图表中获取它们。例如@ = 64, $ = 36。请注意,大多数 ASCII 图表仅提供十六进制值,但数组包含十进制数。
编辑:This chart 还包含十进制数:
您可以侦听元素上的 input
事件,并通过定义 array
允许的字符并检查索引来查看是否允许最后输入的字符。如果该字符不允许,则将其删除:
var element = document.getElementById("inputfield");
var inputText = "";
var allowedInputs = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'];
element.oninput = function (event) {
if(allowedInputs.indexOf(element.value.slice(event.srcElement.selectionEnd - 1, event.srcElement.selectionEnd)) == -1)
element.value = element.value.substr(0, event.srcElement.selectionEnd - 1) + element.value.substr(event.srcElement.selectionEnd);
};
<input id="inputfield"/>
工作fiddle
您可以将要允许的所有字符添加到数组中。
编辑:我更新了代码,因此不能在现有字符之间输入任何不允许的字符。
这是我的自定义指令,可以使用 RegEx 轻松调整以满足任何需要
http://plnkr.co/edit/dgRJkVeX6iwIbXuoMVSW?p=preview
.directive("numberValidation", function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, ele, attrs, ctrl) {
ctrl.$parsers.unshift(function(value) {
if (value) {
var valid = value.match(/^\d+(,\d+)?$/)
ctrl.$setValidity('invalidNumber', valid);
}
return valid ? value : undefined;
});
}
}
});