資訊專欄INFORMATION COLUMN
摘要：鍵盤事件與文本框變化的過程鍵盤事件最基本的應(yīng)用場合是控制文本框元素，而我們要討論的，就是幾個鍵盤事件發(fā)生的時機與文本輸入的過程的關(guān)系。可以看到，除了外，事件并不會輸出剛按下的字符，說明他們在文本框變化之前發(fā)生而在之后發(fā)生。
鍵盤事件與文本框變化的過程
鍵盤事件最基本的應(yīng)用場合是控制文本框元素，而我們要討論的，就是幾個鍵盤事件：keydown、keypress、keyup、textInput發(fā)生的時機與文本輸入的過程的關(guān)系。先看一段代碼：
查看控制臺可以看到鍵盤事件的執(zhí)行順序，這里事件的執(zhí)行分為兩種情況，一種是按下字符鍵，chrome下執(zhí)行的順序為keydown->keypress->textInput->keyup，如果按照不放就交替執(zhí)行keydown和keypress；另一種是按下非字符鍵，chrome下執(zhí)行順序為keydown->keyup，如果按著不放就不停地執(zhí)行keydown。
事件的順序搞清楚了，但我們還要看清鍵盤事件發(fā)生與文本框變化的順序。把上面代碼中的每個事件處理程序再加一句console.log(input.value)，按一個字符?？梢钥吹剑?b>keyup外，keydown、keypress、textInput事件并不會輸出剛按下的字符，說明他們在文本框變化之前發(fā)生而keyup在之后發(fā)生。進(jìn)一步地，也可以給每個事件加個alert()看看，雖然由于alert()的干擾導(dǎo)致keyup不發(fā)生（單步調(diào)試得出的結(jié)論），但這樣一步步執(zhí)行也能直觀看出上面的結(jié)論。
理清這些關(guān)系有什么用呢？當(dāng)然是為了起前端工程的一大目標(biāo)：做出更好地交互。比如你要做個有關(guān)鍵詞提示的搜索框，由于只有keyup事件是在文本框變化后觸發(fā)的，也就意味著彈出提示的代碼只有掛在keyup事件上才能在輸入字符后獲取到輸入框最新的value，而掛在其他事件上就會出現(xiàn)提示與輸入慢半拍的詭異現(xiàn)象。
最后要注意，雖然各瀏覽器基本遵循上面的事件執(zhí)行順序，但不同瀏覽器對鍵盤事件的實現(xiàn)仍有差別，比如火狐和IE并不支持textInput事件；而同時對于非字符鍵，也不一定就按上面提到的只響應(yīng)keydown和keyup，比如在火狐下按backspace鍵也具有字符鍵的行為。
對用戶輸入字符進(jìn)行正則轉(zhuǎn)義數(shù)據(jù)交互的可靠與安全是前端工程需要考慮的重要一環(huán)，我們的用戶既可能輸入一段有歧義的字符，也隨時可能給你來段sql注入或xss，這里我也遇到一個簡單點的情景：如何拿用戶輸入的內(nèi)容來構(gòu)建有效的正則進(jìn)行查詢。
考慮到用戶可能會輸入一些正則的專用符號，如果不對這些符號進(jìn)行轉(zhuǎn)義就直接把整個字符串拿去構(gòu)造正則，那勢必會使查詢結(jié)果背離我們的本意。正則表達(dá)式里對特殊符號轉(zhuǎn)義只要在前面加，所以思路就是將源字符串中的特殊符號替換為待轉(zhuǎn)義字符。實現(xiàn)如下：
function transfer(string) {
return string.replace(/[./^$*+?[]()]/g, "$&");
}
用到了字符串的replace方法，第一個參數(shù)一個是全局匹配所有待轉(zhuǎn)義字符的正則；第二個參數(shù)是個$表達(dá)式，$&獲取所有與正則相匹配的子串，注意這里要在其前面加上而非，因為在普通字符串里使用也得寫為進(jìn)行轉(zhuǎn)義。
可能有人會問，$&不是相當(dāng)于RegExp.lastmatch匹配最近一次匹配項嗎，為何使用它獲取全局正則的所有匹配項？
可以這么想，replace對全局正則匹配項的替換是逐個進(jìn)行的，每匹配一個子串就用第二個參數(shù)的規(guī)則替換一次。所以用$&每次替換最近一次匹配項，也就能到達(dá)看起來一次替換了全局正則的所有匹配項效果。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/87711.html
摘要：和并不是一個標(biāo)準(zhǔn)的屬性，才是，所以火狐長久以來都不支持，同時也不支持。 這個系列保持開坑不埋的狀態(tài)已經(jīng)過去三個月了，而在這幾個月中我才算第一次認(rèn)真地深入理解js。雖然期間筆記是記了不少，但寫博文又不應(yīng)是簡單的復(fù)制粘貼，還是得保證有討論價值、有干貨的。而我面對的現(xiàn)實是：一來基礎(chǔ)差導(dǎo)致識別和撈出有討論價值的干貨得自身功夫練到一定階段，二來又因為記的雜亂且缺乏日常整理，整理一下就是拖一下，再...
閱讀 1672·2023-04-26 00:25
閱讀 982·2021-09-27 13:36
閱讀 992·2019-08-30 14:14
閱讀 2242·2019-08-29 17:10
閱讀 1076·2019-08-29 15:09
閱讀 2010·2019-08-28 18:21
閱讀 1035·2019-08-26 13:27
閱讀 1043·2019-08-26 10:58
