问题更新:如何防止使用AngularJS(或jQuery)将除了char数组中指定的字符之外的所有字符输入到输入字段中?
老问题:我有一个简单的< input type =text/> 字段在我的AngularJS应用程序中,我希望用户只能在字段中输入以下字符:
< $ > <$%&'()* +, - 。/:;< =>?@ [\\] ^ _`{| }〜我知道我可以添加 ng-pattern =allowed 到< input> 然后设置 $ scope.allowed 为一些正则表达式模式这将标记输入无效,如果输入任何无效字符,但我也想防止限制字符被输入到字段全部。
所以我的问题是由两个问题组成:
解决方案
为了限制某些字符的输入,我想到的是附加'keyup','change' ,'粘贴'输入的事件,以及何时触发,以便根据您的模式清理它们的值。我实现了逻辑作为jQuery插件,但你可以适应它的角度,使用更好的命名或任何你想要的。
插件:
$。fn.restrictInputs = function(restrictPattern){ var targets = $(this); //此模式中的字符被接受 //并且其他所有内容都将被清除 //例如'ABCdEfGhI5'变成'ABCEGI5' var pattern = restrictPattern || / [^ 0-9A-Z!\\#$%&'()* +,\-。\ /:;< =>?@ \ [\ ] ^ _`{|}〜] * / g; //默认模式 var restrictHandler = function(){ var val = $(this).val(); var newVal = val.replace(pattern,''); //这个条件是为了防止选择和键盘导航问题 if(val!== newVal){ $(this).val(newVal); } }; targets.on('keyup',restrictHandler); targets.on 'paste',restrictHandler); targets.on('change',restrictHandler); };用法:
$('input')。restrictInputs(); // Or ... $('。my-special-inputs-decorated-with-this-class')。restrictInputs();以下是 JsFiddle Demo
注意:您可以尝试更改执行方式使用禁止字符而不是正则表达式接受字符串,并动态创建正则表达式。你也可以找到适合触发'清洁'的其他事件。
Question Update: How can I prevent all characters except for the ones specified in a char array from being typed into an input field using AngularJS (or jQuery)?
Old Question:I have a simple <input type="text" /> field in my AngularJS application and I want the user to only be able to enter the following characters into the field:
0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ !\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~I know that I can add ng-pattern="allowed" to the <input> and then set $scope.allowed to some regex pattern and that will mark the input invalid if any invalid characters are entered, but I also want to prevent restricted characters from being input into the field AT ALL.
So my question is composed of two questions:
解决方案
To 'restrict some characters from being typed in' what comes in my mind is to attach event handlers for 'keyup', 'change', 'paste' events on inputs and when they are triggered to 'clean' their values against your pattern. I implemented the logic as jQuery plugin but you can adapt it to angular, use better naming or whatever you want.
The plugin:
$.fn.restrictInputs = function(restrictPattern){ var targets = $(this); // The characters inside this pattern are accepted // and everything else will be 'cleaned' // For example 'ABCdEfGhI5' become 'ABCEGI5' var pattern = restrictPattern || /[^0-9A-Z !\\"#$%&'()*+,\-.\/:;<=>?@\[\]^_`{|}~]*/g; // default pattern var restrictHandler = function(){ var val = $(this).val(); var newVal = val.replace(pattern, ''); // This condition is to prevent selection and keyboard navigation issues if (val !== newVal) { $(this).val(newVal); } }; targets.on('keyup', restrictHandler); targets.on('paste', restrictHandler); targets.on('change', restrictHandler); };Usage:
$('input').restrictInputs(); // Or ... $('.my-special-inputs-decorated-with-this-class').restrictInputs();Here is a JsFiddle Demo
Note: you can try to change the implementation to accept string with forbidden characters instead of regular expression and create the regex dynamically. Also you may find others events which are appropriate for triggering the 'cleaning'.
更多推荐
将输入字段中的字符限制为一组字符
发布评论