亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端碎語(yǔ)（4）

zhiwei / 2544人閱讀

摘要：鍵盤(pán)事件與文本框變化的過(guò)程鍵盤(pán)事件最基本的應(yīng)用場(chǎng)合是控制文本框元素，而我們要討論的，就是幾個(gè)鍵盤(pán)事件發(fā)生的時(shí)機(jī)與文本輸入的過(guò)程的關(guān)系?？梢钥吹剑送?，事件并不會(huì)輸出剛按下的字符，說(shuō)明他們?cè)谖谋究蜃兓鞍l(fā)生而在之后發(fā)生。

鍵盤(pán)事件與文本框變化的過(guò)程

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

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

事件的順序搞清楚了，但我們還要看清鍵盤(pán)事件發(fā)生與文本框變化的順序。把上面代碼中的每個(gè)事件處理程序再加一句console.log(input.value)，按一個(gè)字符?？梢钥吹剑?b>keyup外，keydown、keypress、textInput事件并不會(huì)輸出剛按下的字符，說(shuō)明他們?cè)谖谋究蜃兓鞍l(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í)行順序，但不同瀏覽器對(duì)鍵盤(pán)事件的實(shí)現(xiàn)仍有差別，比如火狐和IE并不支持textInput事件；而同時(shí)對(duì)于非字符鍵，也不一定就按上面提到的只響應(yīng)keydown和keyup，比如在火狐下按backspace鍵也具有字符鍵的行為。

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/87711.html

相關(guān)文章

  • 前端碎語(yǔ)（6）

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

    Youngs 評(píng)論0 收藏0

  • 前端碎語(yǔ)（6）

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

    edagarli 評(píng)論0 收藏0

  • 前端碎語(yǔ)（5）

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

    xiaoqibTn 評(píng)論0 收藏0

  • 前端碎語(yǔ)（5）

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

    xialong 評(píng)論0 收藏0

  • 前端碎語(yǔ)（2）

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

    FrancisSoung 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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