JS 全自动检测禁止输入特定字符

项目中输入域，特别是文本输入域，一般都会禁用某些特殊字符，基于这个需求，实现了一个全局设置禁止输入特别字符的方法，核心代码：

Array.from(document.querySelectorAll('input')).map(function(item){ // 检索所有输入域，使用者可以修订别的选择器
    var excludes = ['"',"'"]; // 配置禁止输入的特定字符：这里配置的是单引号和双引号
   /**
    *  addEventListener(EventName,fn,bool): 这里bool设置为true，表示事件响应前处理（事件捕获阶段），很关键
    **/
    item.addEventListener('input',function(ev){
        var has = excludes.some(function(item){
            return ev.target.value && ev.target.value.indexOf(item)>=0;
        });
        if(has) {
            ev.target.value = ev.target.oldvalue||'';
        }else ev.target.oldvalue = ev.target.value;
    },true)
});

页面加载完成后执行该核心代码即可。

 

为了防止重复绑定，可以对代码略作改造：

function validateExcludes(ev){
    var excludes = ['"',"'"]; // 配置禁止输入的特定字符： 这里配置的是单引号和双引号
    var has = excludes.some(function(item){
        return ev.target.value && ev.target.value.indexOf(item)>=0;
    });
    if(has) {
        ev.target.value = ev.target.oldvalue||'';
    }else ev.target.oldvalue = ev.target.value;
}

Array.from(document.querySelectorAll('input')).map(function(item){ // 检索所有输入域，使用者可以修订别的选择器
   /**
    *  addEventListener(EventName,fn,bool): 这里bool设置为true，表示事件响应前处理（事件捕获阶段），很关键
    **/
    item.removeEventListener('input',validateExcludes,true); // 绑定前先移除对应句柄
    item.addEventListener('input',validateExcludes,true);
});