[javascript] 记录一次解决输入内容控制为 半角英数字 + 限定符号问题的过程

Posted 2020-11-21 codermonkie

还是这个小网站项目，需要控制一个输入框的可输入内容，

在此记录一下编码过程。

 

需求：

　　可输入范围：

a-z
A-Z
0-9
-  // 短中横线
_  // 短下划线
.  // 点
‘  // 单引号

 

 

 

<input type=‘text‘ id=‘Target‘ maxlength=‘20‘ />

 

想法很简单，直接在oninput里用正则匹配替换掉不需要的字符，

$(function(){

    $(‘#Target‘).on(‘input‘, function(){
        $(this).val($(this).val().replace(/[^w-\_.‘]/ig, ""));
    }

});

 

是的没错就是这个正则式就可以

/[^w-\_.‘]/ig

w 控制半角英数，（其实还有_)

剩下的是单个字符的控制，前面要加 

检查下有没有问题：

IE9不行，直接没有限制。

=>IE9的话，需要在<input /> 标签里写，

<input type=‘text‘ id=‘Target‘ oninput=‘this.value = this.value.replace(/[^w-\_.‘]/ig, "")‘ />

等下，写法报错，因为有[        ‘         ]，引号问题。。。

解决办法：还是得用函数，

<input type=‘text‘ id=‘Target‘ oninput=‘onTargetInput(this)‘ />

 

var onTargetInput = function (el){
    el.value = el.value.replace(/[^w-\_.‘]/ig, "");
}

 

---- OK ! ----