不允许在字段中输入不需要的字符

not allowing unwanted characters to input in a field

本文关键字：不需要 字符 输入 字段 不允许      更新时间：2023-09-26

我有一个文本字段，我只想在其中输入数字。我使用了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();
                }
            });
        };
    })

它很好用，但我可以输入@、$、！、#等字符&等等。我怎样才能限制这些字符的输入。

您可以侦听元素上的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"/>

工作小提琴

您可以将要允许的所有字符添加到数组中。

编辑：我更新了代码，所以在现有字符之间不能输入不允许的字符。

keyCode数组包含所有不需要的字符的ASCII代码。你可以在那里添加自己的数字，你可以从ascii图表中获得它们。例如，@=64，$=36。请注意，大多数ASCII图表只提供十六进制值，但数组包含十进制数。

编辑：此图表还包含十进制数字：

这是我的自定义指令，可以使用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;
      });
    }
  }
});
相关文章：