[javascript] 記錄一次解決輸入內容控製為 【半形英數字 + 限定符號】問題的過程

標籤：inpu   div   需求   內容   標籤   rip   his   UNC   底線   

還是這個小網站項目，需要控制一個輸入框的可輸入內容，

在此記錄一下編碼過程。

 

需求：

　　可輸入範圍：

a-zA-Z0-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 ! ----

 

[javascript] 記錄一次解決輸入內容控製為 【半形英數字 + 限定符號】問題的過程