在AngularJS中限制Regex键入的指令
-
null
<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;
}
});
}
};
});
共有1个答案
根据您的方法参见Plnkr修复：
下文解释了原因和变化。附带说明：我不会以这种方式实现它（使用ngmodel和$parsers和$formatters，例如https://stackoverflow.com/a/15090867/2103767)--这超出了问题的范围。但是，我找到了Ben Lesh的regexValidate的完整实现，它将适合您的问题域：-
如果我键入一个值'1.1111'，然后进入第一个数字，然后键入另一个数字（以便得到一个值'11.1111')，则不会发生任何事情。
那么如何得到正确位置的位置，并对重构后的字符串进行验证呢？可以使用未记录的event.target.SelectionStart属性。注意，即使您没有选择任何内容，您也将填充此内容（即11和其他浏览器）。参见Plnkr修正
第二个是允许输入一些字符（深刻号、尖锐号、大号、扬抑号）（多次按其中一个），尽管regex不允许。
修正了regex-正确的如下：
link: function(scope, elem, attrs, ctrl) {
var regex = attrs.allowTyping;
elem.bind('keypress', function(event) {
var pos = event.target.selectionStart;
var oldViewValue = elem.val();
var input = newViewValue(oldViewValue, pos, event.key);
console.log(input);
var validator = new RegExp(regex);
if (!validator.test(input)) {
event.preventDefault();
return false;
}
});
function newViewValue(oldViewValue, pos, key) {
if (!oldViewValue) return key;
return [oldViewValue.slice(0, pos), key, oldViewValue.slice(pos)].join('');
}
}
-
问题内容： 我正在一个小团队中工作，使用AngularJS进行构建，并试图维护一些基本标准和最佳实践。特别是考虑到我们相对较新的Angular。 我的问题是关于指令的。更准确地说，是选项。 因此，我们中的某些人在html 中使用了它。 别人都在用，并具有在html。 然后，当然可以使用以上两种方法之一。 目前，这没什么大不了的，尽管当这个项目达到预期的规模时，我希望任何人都可以轻松地了解正在发生的
-
我在写一个地牢风格的游戏，地牢基本上是一个网格窗格。我想让玩家每0.5秒移动一格，如果他保持控制键。但我不知道如何做到这一点。我读过JavaFX：如何检测钥匙是否被按下。但这个问题与我的问题并没有特别的关系（除了我可以追踪发生了多少关键事件，或许可以在此基础上做更多）。所以我跟随这篇文章并尝试使用线程。sleep（）解决了我的问题，但事实证明玩家只是停了几秒钟，然后突然移动了几格。 有人知道怎么解
-
问题内容： 我正在寻找将输入中的值限制为4并将4位数字值处理给我的控制器的方法。 问题答案： 可以随时为其发出指令：
-
问题内容： 谁能告诉我如何在另一个angularJS指令中包含一个指令中的控制器。例如我有以下代码 通过所有帐户，我应该能够使用addProduct指令访问控制器，但是我不能。有更好的方法吗？ 问题答案： 我很幸运，并在对问题的评论中回答了这个问题，但是为了完整起见，我发布了完整的答案，因此我们可以将此问题标记为“已回答”。 这取决于您要通过共享控制器来完成的工作。您可以共享同一控制器（尽管实例不
-
本文向大家介绍AngularJS入门教程之AngularJS指令，包括了AngularJS入门教程之AngularJS指令的使用技巧和注意事项，需要的朋友参考一下 熟悉HTML的朋友都知道，HTML有很多属性。比如<a>标签的href属性可以来指定链接的URL地址，<input>标签的type属性可以用来指定input的类型。AngularJS指令就是通过扩展HTML的属性来为 AngularJS
-
问题内容： 我正在尝试将服务注入如下指令： 但是，这给了我一个错误。有人可以调查一下代码，并告诉我是否做错了什么？ 问题答案： 您可以对指令进行注入，看起来就像在其他地方一样。