input 禁止輸入特殊字符的四種實(shí)現(xiàn)方式
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">昨天項目搜索的時候報錯，蛋疼的是生產(chǎn)庫中的，看了下日志，原因是用戶搜索的時候輸入了特殊字符，沒辦法最快捷的辦法是直接把用戶輸入的數(shù)據(jù)進(jìn)行篩選，去掉特殊字符</span>
有些特殊字符傳入到后臺是會產(chǎn)生錯誤的 有可能會sql注入，所以從根本上攔截
下面一起探討下input禁止輸入特殊字符的方式：
方式一：拿到value值以后 在你傳遞之前處理
function stripscript(value) {
var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
var rs = "";
for (var i = 0; i < value.length; i++) {
rs = rs+s.substr(i, 1).replace(pattern, '');
}
return rs;
}
直接調(diào)用這個函數(shù)即可 。
方式二：從最根本上也就是提示用戶輸入不了特殊字符
function showKeyPress(evt) {
evt = (evt) ? evt : window.event
return checkSpecificKey(evt.keyCode);
}
function checkSpecificKey(keyCode) {
var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";//Specific Key list
var realkey = String.fromCharCode(keyCode);
var flg = false;
flg = (specialKey.indexOf(realkey) >= 0);
if (flg) {
// alert('請勿輸入特殊字符: ' + realkey);
return false;
}
return true;
}
document.onkeypress = showKeyPress;
使用：在input控件上加入事件 根本沒反應(yīng)
這個好像有點(diǎn)小問題 中文狀態(tài)下沒反應(yīng) 不知道怎么回事 所以又找了一種
方式三：onkeyup事件 拿到以后去匹配 跟方式一類似
function ValidateValue(textbox) {
var IllegalString = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
var textboxvalue = textbox.value;
var index = textboxvalue.length - 1;
var s = textbox.value.charAt(index);
if (IllegalString.indexOf(s) >= 0) {
s = textboxvalue.substring(0, index);
textbox.value = s;
}
}
使用： onkeyup = "ValidateValue(this)" 他會輸入以后會立馬消失，用戶是可以看得到我輸入的 只是說輸入以后就沒了，弊端是連續(xù)輸入就不會消失了（按住不動）
接下來最牛逼的一種 中和以上方式
方式四：直接在控件上使用正在
// <input /[\W]/g,'') "/[^\d]/g,''))"> // 控制輸入框只能輸入文字或數(shù)字，也可以不允許輸入特殊字符 這里不允許輸入如下字符: (像 !@#$%^&* 等)<br>
這種方式用戶可以看到輸入了會立馬消失 跟方式三差不多 但連續(xù)輸入是有效的
下面看下js里面判斷輸入的字符不可為特殊字符：
一、document.onkeypress事件是當(dāng)輸入一個字符的時候就進(jìn)行校驗(yàn)，校驗(yàn)時執(zhí)行函授showKeyPress，返回true的時候可輸入，false不可輸入。
二、evt = (evt) ? evt : window.event，是按下鍵盤就產(chǎn)生此事件獲得你鍵入的值（是鍵盤的keyCode）。
var realkey = String.fromCharCode(keyCode);
String.fromCharCode()方法是把鍵盤值（keyCode）轉(zhuǎn)換成你真實(shí)輸入的值。
三、方法specialKey.indexOf(realkey)：
.indexOf()是String的方法，字符串的IndexOf()方法搜索在該字符串上是否出現(xiàn)了作為參數(shù)傳遞的字符串,如果找到字符串,則返回字符的起始位置 (0表示第一個字符,1表示第二個字符依此類推)如果說沒有找到則返回 -1
四、var specialKey = "#$%\^*\'\"\+";
這里是帶轉(zhuǎn)義符的字符串，#、$、%、^、*、'、"、+ 這些符號是特殊符號，其中前面帶\的是需要轉(zhuǎn)義的。
如果要在當(dāng)個文本框中加限制輸入特殊符號，用<input type="text" id="name" onkeypress="showKeyPress()">
以上所述是小編給大家介紹的input 禁止輸入特殊字符的四種實(shí)現(xiàn)方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了微信小程序 swiper組件輪播圖詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下，希望能給你帶來幫助2021-08-08
微信小程序中不同頁面?zhèn)鬟f參數(shù)的操作方法
這篇文章主要介紹了微信小程序中不同頁面?zhèn)鬟f參數(shù)的操作方法,在開發(fā)項目中,避免不了不同頁面之間傳遞數(shù)據(jù)等,那么就需要進(jìn)行不同頁面之間的一個數(shù)據(jù)傳遞的,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了JS 對象屬性相關(guān)(檢查屬性、枚舉屬性等),需要的朋友可以參考下2015-04-04
這篇文章主要介紹了詳解JavaScript之Array.reduce源碼解讀，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
微信公眾號授權(quán)登錄的使用最為常見,當(dāng)然只是一些會只有登錄,所以選擇點(diǎn)擊授權(quán)登,下面這篇文章主要給大家介紹了微信公眾號授權(quán)登錄的超詳細(xì)步驟,需要的朋友可以參考下2022-12-12
JavaScript實(shí)現(xiàn)動態(tài)增刪表格的方法
本篇文章主要介紹了JavaScript實(shí)現(xiàn)動態(tài)增刪表格，可以實(shí)現(xiàn)表格增加和刪除數(shù)據(jù)的功能，非常具有實(shí)用價值，有興趣的可以了解一下2017-03-03
這篇文章主要介紹了用Webpack構(gòu)建Vue項目的實(shí)踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了淺談讓你的代碼更簡短，更整潔，更易讀的ES6小技巧，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
JavaScript鏈?zhǔn)秸{(diào)用原理與實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript鏈?zhǔn)秸{(diào)用,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript鏈?zhǔn)秸{(diào)用基本原理、實(shí)現(xiàn)方法與相關(guān)操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級評價效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12