我编写了一个 Angular Directive(指令)，用于通过指定正则表达式来禁止从输入中键入内容。在该指令中，我指出了一个将用于允许输入数据的正则表达式。从概念上讲，它工作正常，但此解决方案中有两个错误:
- 在第一个 Plunker例如，输入必须允许仅数字或数字后跟一个点[.]，或数字后跟一个点后跟不超过四位的数字。
- 如果我输入一个值 '1.1111' 然后我转到第一个数字然后输入另一个数字(为了得到一个值 '11.1111' ) ，没有任何反应。错误在于我使用表达式
elem.val() + event.key在我的正则表达式验证器上。我不知道如何获得整个 按键事件输入的当前值；
- 如果我输入一个值 '1.1111' 然后我转到第一个数字然后输入另一个数字(为了得到一个值 '11.1111' ) ，没有任何反应。错误在于我使用表达式
- 第二个是一些字符(重音符、锐音符、波浪号、抑扬符)被允许输入(不止一次按下其中一个)，尽管正则表达式不允许它们。
我需要在我的代码中进行哪些更改才能通过正则表达式获得有效的类型限制？
<html ng-app="app">
<head>
<script data-require="angularjs@1.6.4" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Restrict typing by RegExp</h1>
PATTERN 1 (^\d+$|^\d+[.]$|^\d+[.]\d{1,4}$) <input type="text" allow-typing="^\d+$|^\d+[.]$|^\d+[.]\d{1,4}$"/><br>
ONLY NUMBERS <input type="text" allow-typing="^[0-9]+$"/><br>
ONLY STRINGS <input type="text" allow-typing="^[a-zA-Z]+$"/>
</body>
</html>
指令
angular.module('app', []).directive('allowTyping', function() {
return {
restrict: 'A',
link: function(scope, elem, attrs, ctrl) {
var regex = attrs.allowTyping;
elem.bind('keypress', function(event) {
var input = elem.val() + event.key;
var validator = new RegExp(regex);
if(!validator.test(input)) {
event.preventDefault();
return false;
}
});
}
};
});
最佳答案
如果这是我的代码，我会完全改变策略:我会监听 input 事件，而不是尝试对用户与该字段的交互进行微观管理。
总的来说，您采用的方法存在问题。最大的一个是 keypress 不会针对该字段的所有更改发出。 值得注意的是，
它不是由 DELETE 和 BACKSPACE 键触发的。
输入法可以绕过它。当您将变音符号作为变音符号输入时，您的代码并未记录更改。一般来说，如果用户使用 input method , 不能保证添加到该字段的每个新字符都会导致
keypress事件。这取决于用户选择的方法。keypress在用户从字段中剪切或粘贴到字段时没有帮助。
您可以添加代码来尝试处理上述所有情况，但很快就会变得复杂。您已经遇到了 elem.val() + event.key 的问题，因为 keypress 可能总是与插入的字符有关在字段的尽头。用户可能已经移动了插入符号，因此您必须跟踪插入符号的位置。一条评论建议收听 keyup 但这对输入法或粘贴/剪切事件没有帮助。
相比之下，input event当字段的值发生变化时生成。以上所有情况均已处理。例如，这会起作用:
elem.bind('input', function(event) {
var validator = new RegExp(regex);
elem.css("background-color", !validator.test(elem.val()) ? "red" : null);
});
这是一个最小的说明，您可以将其放入 fiddle 中以替换当前的事件处理程序。在实际的应用程序中，我会给用户一个详细的错误消息，而不是仅仅更改字段的颜色，我会在事件处理程序之外只创建一次 validator，但这给了你想法。
(还有一个 change 事件，但您不想使用它。对于文本字段，它在焦点离开该字段时生成，但为时已晚。)
关于javascript - 在 AngularJS 中限制正则表达式输入的指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48234704/