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

【问题标题】：not allowing unwanted characters to input in a field不允许在字段中输入不需要的字符
【发布时间】：2015-03-31 10:22:49
【问题描述】：

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

            });
        };
    })

它工作正常，但我可以输入诸如@、$、!、#、& 等字符。我如何也可以限制这些字符的输入。

【问题讨论】：

请注意，您可以使用 element.on('keydown',...防止默认等
重复stackoverflow.com/questions/19036443/…

标签： javascript html angularjs ionic-framework

【解决方案1】：

您可以在元素上侦听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);
};

&lt;input id="inputfield"/&gt;

工作fiddle

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

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

【讨论】：

我可以在 angularjs 中使用它吗？我应该在我的控制器中使用它吗？
@CraZyDroiD 这是纯 js，因此您可以将它与任何库一起使用；)
如果我尝试在某些手机的某些键盘中输入笑脸，该字段会卡住。有解决办法吗？
@CraZyDroiD 对不起，对于迟到的答案，我现在更新答案。我用 Sony Xperia Z 试了一下，效果很好。
我遇到了另一个问题。您的解决方案第一次起作用。但是如果我转到另一个字段并返回我的输入字段，那么我可以输入字符。我尝试在我的输入字段中单击您的解决方案。那么它正在工作，但问题是该字段被清除了。你有解决方案吗？

【解决方案2】：

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

编辑：This chart 还包含十进制数字：

【讨论】：

【解决方案3】：

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

    }
  }
});

【讨论】：