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

Question

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

            });
        };
    })

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

Answer 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);
};

<input id="inputfield"/>

正在工作fiddle

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

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