将输入字段中的字符限制为一组字符 [英] Restricting Characters in Input Field to a Set of Characters

问题描述

问题更新：如何防止使用AngularJS（或jQuery）将除了char数组中指定的字符之外的所有字符输入到输入字段中？

---

老问题：

我有一个简单的< input type =text/> 字段在我的AngularJS应用程序中，我希望用户只能在字段中输入以下字符：

< $ > <$％&'（）* +， - 。/：;< =>？@ [\\] ^ _`{| }〜


我知道我可以添加 ng-pattern =allowed 到< input> 然后设置 $ scope.allowed 为一些正则表达式模式这将标记输入无效，如果输入任何无效字符，但我也想防止限制字符被输入到字段全部。





所以我的问题是由两个问题组成：

1. Wha t正则表达式模式是否用于限制字符集到我上面发布的字符集？


2. 如何防止在字段中输入非法字符？ （例如，如果您输入小写字母，则不会出现在字段中，如果您尝试粘贴包含任何非法字符的文本，它们将立即被删除）。

解决方案

为了限制某些字符的输入，我想到的是附加'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:

1. What regex pattern do I use to restrict the character set to the one I posted above?
2. How do I prevent illegal characters from being entered in the field? (e.g. if you type a lowercase letter then it won't appear in the field to begin with, similarly if you try to paste in text containing any illegal characters they will be removed immediately)

解决方案

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'.

这篇关于将输入字段中的字符限制为一组字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！