成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端碎語（4）

zhiwei / 2495人閱讀

摘要：鍵盤事件與文本框變化的過程鍵盤事件最基本的應(yīng)用場合是控制文本框元素，而我們要討論的，就是幾個(gè)鍵盤事件發(fā)生的時(shí)機(jī)與文本輸入的過程的關(guān)系。可以看到，除了外，事件并不會(huì)輸出剛按下的字符，說明他們在文本框變化之前發(fā)生而在之后發(fā)生。

鍵盤事件與文本框變化的過程

鍵盤事件最基本的應(yīng)用場合是控制文本框元素，而我們要討論的，就是幾個(gè)鍵盤事件：keydown、keypress、keyup、textInput發(fā)生的時(shí)機(jī)與文本輸入的過程的關(guān)系。先看一段代碼：

查看控制臺可以看到鍵盤事件的執(zhí)行順序，這里事件的執(zhí)行分為兩種情況，一種是按下字符鍵，chrome下執(zhí)行的順序?yàn)?b>keydown->keypress->textInput->keyup，如果按照不放就交替執(zhí)行keydown和keypress；另一種是按下非字符鍵，chrome下執(zhí)行順序?yàn)?b>keydown->keyup，如果按著不放就不停地執(zhí)行keydown。

事件的順序搞清楚了，但我們還要看清鍵盤事件發(fā)生與文本框變化的順序。把上面代碼中的每個(gè)事件處理程序再加一句console.log(input.value)，按一個(gè)字符。可以看到，除了keyup外，keydown、keypress、textInput事件并不會(huì)輸出剛按下的字符，說明他們在文本框變化之前發(fā)生而keyup在之后發(fā)生。進(jìn)一步地，也可以給每個(gè)事件加個(gè)alert()看看，雖然由于alert()的干擾導(dǎo)致keyup不發(fā)生（單步調(diào)試得出的結(jié)論），但這樣一步步執(zhí)行也能直觀看出上面的結(jié)論。

理清這些關(guān)系有什么用呢？當(dāng)然是為了起前端工程的一大目標(biāo)：做出更好地交互。比如你要做個(gè)有關(guān)鍵詞提示的搜索框，由于只有keyup事件是在文本框變化后觸發(fā)的，也就意味著彈出提示的代碼只有掛在keyup事件上才能在輸入字符后獲取到輸入框最新的value，而掛在其他事件上就會(huì)出現(xiàn)提示與輸入慢半拍的詭異現(xiàn)象。

最后要注意，雖然各瀏覽器基本遵循上面的事件執(zhí)行順序，但不同瀏覽器對鍵盤事件的實(shí)現(xiàn)仍有差別，比如火狐和IE并不支持textInput事件；而同時(shí)對于非字符鍵，也不一定就按上面提到的只響應(yīng)keydown和keyup，比如在火狐下按backspace鍵也具有字符鍵的行為。

對用戶輸入字符進(jìn)行正則轉(zhuǎn)義

數(shù)據(jù)交互的可靠與安全是前端工程需要考慮的重要一環(huán)，我們的用戶既可能輸入一段有歧義的字符，也隨時(shí)可能給你來段sql注入或xss，這里我也遇到一個(gè)簡單點(diǎn)的情景：如何拿用戶輸入的內(nèi)容來構(gòu)建有效的正則進(jìn)行查詢。

考慮到用戶可能會(huì)輸入一些正則的專用符號，如果不對這些符號進(jìn)行轉(zhuǎn)義就直接把整個(gè)字符串拿去構(gòu)造正則，那勢必會(huì)使查詢結(jié)果背離我們的本意。正則表達(dá)式里對特殊符號轉(zhuǎn)義只要在前面加，所以思路就是將源字符串中的特殊符號替換為待轉(zhuǎn)義字符。實(shí)現(xiàn)如下：

    function transfer(string) {
        return string.replace(/[./^$*+?[]()]/g, "$&");
    }

用到了字符串的replace方法，第一個(gè)參數(shù)一個(gè)是全局匹配所有待轉(zhuǎn)義字符的正則；第二個(gè)參數(shù)是個(gè)$表達(dá)式，$&獲取所有與正則相匹配的子串，注意這里要在其前面加上而非，因?yàn)樵谄胀ㄗ址锸褂?b>也得寫為進(jìn)行轉(zhuǎn)義。

可能有人會(huì)問，$&不是相當(dāng)于RegExp.lastmatch匹配最近一次匹配項(xiàng)嗎，為何使用它獲取全局正則的所有匹配項(xiàng)？

可以這么想，replace對全局正則匹配項(xiàng)的替換是逐個(gè)進(jìn)行的，每匹配一個(gè)子串就用第二個(gè)參數(shù)的規(guī)則替換一次。所以用$&每次替換最近一次匹配項(xiàng)，也就能到達(dá)看起來一次替換了全局正則的所有匹配項(xiàng)效果。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87711.html

相關(guān)文章

  • 前端碎語（6）

    摘要：和屬性數(shù)值對應(yīng)的是元素的內(nèi)容加所占據(jù)的視覺面積，有滾動(dòng)條時(shí)還要加上滾動(dòng)條，不含。和仍要分有沒有滾動(dòng)，有滾動(dòng)時(shí)指的是整個(gè)頁面內(nèi)容的大小沒滾動(dòng)時(shí)在下指視口的大小和下則是和一樣。與屬性在下都和原來一樣指整個(gè)元素的可視寬高。 光標(biāo)效果不見了？ 在頁面里，屏幕上光標(biāo)的樣式我們可以用css的cursor屬性進(jìn)行定義。一般來講，只要光標(biāo)hover到指定的元素上面其樣式就會(huì)按我們指定的進(jìn)行顯示，但是如...

    Youngs 評論0 收藏0

  • 前端碎語（6）

    摘要：和屬性數(shù)值對應(yīng)的是元素的內(nèi)容加所占據(jù)的視覺面積，有滾動(dòng)條時(shí)還要加上滾動(dòng)條，不含。和仍要分有沒有滾動(dòng)，有滾動(dòng)時(shí)指的是整個(gè)頁面內(nèi)容的大小沒滾動(dòng)時(shí)在下指視口的大小和下則是和一樣。與屬性在下都和原來一樣指整個(gè)元素的可視寬高。 光標(biāo)效果不見了？ 在頁面里，屏幕上光標(biāo)的樣式我們可以用css的cursor屬性進(jìn)行定義。一般來講，只要光標(biāo)hover到指定的元素上面其樣式就會(huì)按我們指定的進(jìn)行顯示，但是如...

    edagarli 評論0 收藏0

  • 前端碎語（5）

    摘要：禁止用戶選擇文字在一些應(yīng)用場合，我們不希望用戶能夠選擇文字。在下使用透明效果雖然已經(jīng)停止對的技術(shù)支持了，然而做前端的還得被它惡心一段時(shí)間，有些兼容性的問題是我們?nèi)砸鎸Φ?。但是，前端界被虐了這么多年，解決問題的方法總是有的。 禁止用戶選擇文字 在一些應(yīng)用場合，我們不希望用戶能夠選擇文字。比如在拖動(dòng)交互中，如果用戶能選擇元素內(nèi)部的文字，也就意味著能拖動(dòng)它們，這樣就會(huì)干擾對元素的拖動(dòng)、影響...

    xiaoqibTn 評論0 收藏0

  • 前端碎語（5）

    摘要：禁止用戶選擇文字在一些應(yīng)用場合，我們不希望用戶能夠選擇文字。在下使用透明效果雖然已經(jīng)停止對的技術(shù)支持了，然而做前端的還得被它惡心一段時(shí)間，有些兼容性的問題是我們?nèi)砸鎸Φ?。但是，前端界被虐了這么多年，解決問題的方法總是有的。 禁止用戶選擇文字 在一些應(yīng)用場合，我們不希望用戶能夠選擇文字。比如在拖動(dòng)交互中，如果用戶能選擇元素內(nèi)部的文字，也就意味著能拖動(dòng)它們，這樣就會(huì)干擾對元素的拖動(dòng)、影響...

    xialong 評論0 收藏0

  • 前端碎語（2）

    摘要：和并不是一個(gè)標(biāo)準(zhǔn)的屬性，才是，所以火狐長久以來都不支持，同時(shí)也不支持。 這個(gè)系列保持開坑不埋的狀態(tài)已經(jīng)過去三個(gè)月了，而在這幾個(gè)月中我才算第一次認(rèn)真地深入理解js。雖然期間筆記是記了不少，但寫博文又不應(yīng)是簡單的復(fù)制粘貼，還是得保證有討論價(jià)值、有干貨的。而我面對的現(xiàn)實(shí)是：一來基礎(chǔ)差導(dǎo)致識別和撈出有討論價(jià)值的干貨得自身功夫練到一定階段，二來又因?yàn)橛浀碾s亂且缺乏日常整理，整理一下就是拖一下，再...

    FrancisSoung 評論0 收藏0

發(fā)表評論

0條評論

zhiwei

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<