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

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

在此记录一下编码过程。

需求:

  可输入范围:

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 ! ----

猜你喜欢

转载自www.cnblogs.com/CoderMonkie/p/9262422.html