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

資訊專欄INFORMATION COLUMN

DOM事件學(xué)習(xí)之兼容中文輸入法

jzzlee / 2182人閱讀

摘要：寫在前面很多同學(xué)或許有遇到過這樣的場景需要實時得到用戶在輸入框中輸入的內(nèi)容，很多同學(xué)可能第一反應(yīng)就是監(jiān)測，這些事件，然后把獲取到的內(nèi)容輸出出來可是上述解決方法卻會有個問題，就是使用中文輸入法時，會出現(xiàn)像這樣的內(nèi)容，這是為什么呢原來，和獲取到

寫在前面

很多同學(xué)或許有遇到過這樣的場景：
需要實時得到用戶在input輸入框中輸入的內(nèi)容，很多同學(xué)可能第一反應(yīng)就是監(jiān)測keyup，keydown這些事件，然后把獲取到的內(nèi)容輸出出來；

可是上述解決方法卻會有個問題，就是使用中文輸入法時，會出現(xiàn)像 zhong"wen 這樣的內(nèi)容，這是為什么呢？

原來，keyup和keydown獲取到的內(nèi)容只是輸入時的內(nèi)容，而中文輸入法需要最好打個空格才能得到打字的結(jié)果，這就造成了困擾，獲取到的內(nèi)容不是想要的?。∮心居校。?！

不要擔(dān)心，使用以下這幾個事件可以讓你對付中文輸入法無憂：compositionstart/compositionupdate/compositionend

事件解釋

compositionstart
是指中文輸入法開始輸入觸發(fā)，每次輸入開始僅執(zhí)行一次，執(zhí)行的開始是end事件結(jié)束了才會觸發(fā)；

compositonupdate
是指中文輸入法在輸入時觸發(fā)，也就是可能得到 zhogn"wen 這種內(nèi)容，這里返回的內(nèi)容是實時的；僅在Start事件觸發(fā)后觸發(fā)，輸入時實時觸發(fā)；

compositionend
是指中文輸入法輸入完成是觸發(fā)；這是得到的結(jié)果就是最終輸入完成的結(jié)果；此事件僅執(zhí)行一次；

使用 
document.addEventListener("compositionstart", function(e) {
    console.log("start:" + e.data);
});

document.addEventListener("compositionstart", function(e) {
    console.log("start:" + e.data);
});

document.addEventListener("compositionend", function(e) {
    console.log("end:" + e.data);
});
結(jié)果

參考鏈接http://frontenddev.org/articl...

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

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

相關(guān)文章

  • React學(xué)習(xí)之漫談React

    摘要：事件系統(tǒng)合成事件的綁定方式合成事件的實現(xiàn)機制事件委派和自動綁定。高階組件如果已經(jīng)理解高階函數(shù)，那么理解高階組件也很容易的。例如我們常見的方法等都是高階函數(shù)。對測試群眾來說，從質(zhì)量保證的角度出發(fā)，單元測試覆蓋率是 事件系統(tǒng) 合成事件的綁定方式 `Test` 合成事件的實現(xiàn)機制：事件委派和自動綁定。 React合成事件系統(tǒng)的委托機制，在合成事件內(nèi)部僅僅是對最外層的容器進行了綁定，并且依賴...

    darkbug 評論0 收藏0

  • Java培訓(xùn)學(xué)習(xí)之Java開源軟件的匯總

    摘要：開源軟件的匯總開源插件是一個類似于的插件，它可以幫助你在不退出的環(huán)境下瀏覽本地文件系統(tǒng)。事件模型支持基于的事件提交。開源容器是一個非侵入式的對象反轉(zhuǎn)控制容器容器。開源插件提供一個可針對文件語法進行著色的編輯器。 Java開源軟件的匯總：EcSplorer 【Java開源 Eclipse插件】EcSplorer(Eclips...

    qiangdada 評論0 收藏0

  • java第三方包學(xué)習(xí)之jsoup

    摘要：下面隆重介紹簡介是一個解析的第三方庫，它提供了一套非常方便的，可使用，以及類的操作方法來取出和操作數(shù)據(jù)。一個文檔的對象模型文檔由多個和組成其繼承結(jié)構(gòu)如下繼承繼承繼承一個包含一個子節(jié)點集合，并擁有一個父。 前言 使用python寫爬蟲的人，應(yīng)該都聽過beautifulsoup4這個包，用來它來解析網(wǎng)頁甚是方便。那么在java里有沒有類似的包呢？當(dāng)然有啦！而且也非常好用。下面隆重介紹jso...

    dackel 評論0 收藏0

  • React學(xué)習(xí)之認(rèn)識Flux架構(gòu)模式

    摘要：是用戶建立客戶端應(yīng)用的前端架構(gòu)，它通過利用一個單向的數(shù)據(jù)流補充了的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用。結(jié)構(gòu)和數(shù)據(jù)流一個單向數(shù)據(jù)流是模式的核心。 Flux是Facebook用戶建立客戶端Web應(yīng)用的前端架構(gòu)，它通過利用一個單向的數(shù)據(jù)流補充了React的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用Flux。 ...

    EasonTyler 評論0 收藏0

  • React學(xué)習(xí)之初入React世界

    摘要：語法將語法直接加入到代碼中，再通過翻譯器裝換到純后由瀏覽器執(zhí)行。事實上，并不需要花精力學(xué)習(xí)?？梢哉f，基本語法基本被囊括了，但也有少許不同。明確的數(shù)據(jù)流動。這條原則讓組件之間的關(guān)系變得簡單且可預(yù)測。使用獲取和顯示回調(diào)。 JSX語法 JSX將HTML語法直接加入到JavaScript代碼中，再通過翻譯器裝換到純JavaScript后由瀏覽器執(zhí)行。在實際開發(fā)中，JSX在產(chǎn)品打包階段都已經(jīng)編...

    cjie 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<