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);
});
原文地址:https://www.cnblogs.com/xtreme/p/12201546.html