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

jzzlee 發(fā)布于2019-08-20 12:21 / 2173人閱讀

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

寫在前面

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

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

原來(lái)，keyup和keydown獲取到的內(nèi)容只是輸入時(shí)的內(nèi)容，而中文輸入法需要最好打個(gè)空格才能得到打字的結(jié)果，這就造成了困擾，獲取到的內(nèi)容不是想要的啊！有木有！！！

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

事件解釋

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

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

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)之substr() 深度學(xué)習(xí)之概要 webrtc學(xué)習(xí)之九 linux學(xué)習(xí)之centos

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/80935.html

相關(guān)文章

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

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

darkbug 2019-08-23 18:38 評(píng)論0 收藏0
Java培訓(xùn)學(xué)習(xí)之Java開(kāi)源軟件的匯總

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

qiangdada 2021-11-25 09:43 評(píng)論0 收藏0
java第三方包學(xué)習(xí)之jsoup

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

dackel 2019-08-14 17:06 評(píng)論0 收藏0
React學(xué)習(xí)之認(rèn)識(shí)Flux架構(gòu)模式

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

EasonTyler 2019-08-23 18:37 評(píng)論0 收藏0
React學(xué)習(xí)之初入React世界

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

cjie 2019-08-23 18:38 評(píng)論0 收藏0