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

資訊專欄INFORMATION COLUMN

中文輸入截?cái)鄦栴}

makeFoxPlay / 911人閱讀

摘要：在源碼中尋找答案文檔中有如下一段話對于需要輸入法編輯器的語言中文日文韓文等，要注意的是，在字母組合窗口輸入時(shí)并不會更新。

前幾天一個(gè)項(xiàng)目中需要對一個(gè)輸入框輸入進(jìn)行限制，不能輸入數(shù)字，可以輸入漢字字母其他字符等。
心想這個(gè)不難，便隨手寫下了如下代碼：

    const inputEle = document.querySelector("#input")
    const idReg = /[0-9]/g
    inputEle.addEventListener("input", function(e){
        let value = e.target.value

        value = value.replace(idReg, "")
        inputEle.value = value
    })

但是等提到測試環(huán)境后，結(jié)果被測試同學(xué)發(fā)現(xiàn)在中文輸入法下回出現(xiàn)如下問題：

IME問題

最終尋找一番后發(fā)現(xiàn)，原來這是IME問題，即中文輸入時(shí)出現(xiàn)在輸入框上方的帶候選但還未選擇的狀態(tài)，其實(shí)這個(gè)在韓文日文等非字母文字中都會出現(xiàn)這個(gè)問題。
那如何解決呢。

用搜索引擎一搜索，便看到了有人說可以通過compositionstart和compositionend判斷是否處于IME狀態(tài)。但是這個(gè)兩個(gè)函數(shù)從來沒見過，敢用嗎？兼容性如何？

于是便到caniuse和MDN上看看。

caniuse上根本就沒沒有這個(gè)函數(shù)的兼容性報(bào)告，MDN上雖然說可以用，但是心里還是沒底。
這時(shí)想到vue文檔中好像提過關(guān)于中文輸入，于是馬上就翻了翻vue的文檔。

在vue源碼中尋找答案

vue文檔中有如下一段話

對于需要輸入法編輯器的語言（中文、日文、韓文等），要注意的是，在 IME 字母組合窗口輸入時(shí) v-model 并不會更新。如果你想在此期間滿足更新需求，請使用 input 事件。

說明vue解決了這個(gè)問題，那vue是怎么實(shí)現(xiàn)的，是使用compositionstart和compositionend，還是其他方法？于是帶著疑問道vue的源碼中尋找答案。

在關(guān)于v-model相關(guān)代碼中很快就看到了這行代碼

  if (needCompositionGuard) {
    code = `if($event.target.composing)return;${code}`
  }

但是很明顯composing不是event.target的標(biāo)準(zhǔn)屬性，那是從哪里來的呢，于是全局搜索了composing，很快在這里找到了答案。

    function onCompositionStart (e) {
      e.target.composing = true
    }
    
    function onCompositionEnd (e) {
      e.target.composing = false
      trigger(e.target, "input")
    }

而這兩個(gè)函數(shù)是在哪里被調(diào)用的呢？就在當(dāng)前文件內(nèi)一搜索就找到了。

  el.addEventListener("compositionstart", onCompositionStart)
  el.addEventListener("compositionend", onCompositionEnd)

哈哈，原來就是前面所說的compositionstart和compositionend方法。

結(jié)論

既然vue中使用的就是compositionstart和compositionend方法，并且經(jīng)過這么多人檢驗(yàn)，肯定是沒問題的，可以在項(xiàng)目中放心的使用。

雖然一開始就找到了正確的答案，但是后面的求證才是最有價(jià)值的。

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

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

相關(guān)文章

  • 實(shí)時(shí)監(jiān)控用戶輸入--中文輸入解決方案

    摘要：需求對用戶的輸入進(jìn)行實(shí)時(shí)監(jiān)控，當(dāng)用戶輸入的內(nèi)容超出規(guī)定的字符長度時(shí)對用戶輸入進(jìn)行截?cái)嗖⒔o予警告提示。實(shí)驗(yàn)發(fā)現(xiàn)，這種處理方式對于英文字符或者數(shù)字輸入時(shí)效果完美，但是在輸入中文時(shí)有。用這個(gè)事件，我們可以實(shí)現(xiàn)中文輸入法截?cái)嗟膯栴}了。 需求：對用戶的輸入進(jìn)行實(shí)時(shí)監(jiān)控，當(dāng)用戶輸入的內(nèi)容超出規(guī)定的字符長度時(shí)對用戶輸入進(jìn)行截?cái)嗖⒔o予警告提示。 看到這一需求，第一想法就是對所需實(shí)時(shí)監(jiān)控的input輸入...

    Jingbin_ 評論0 收藏0

  • textarea,input輸入字符數(shù)限制。

    摘要：但是有時(shí)候我們需要實(shí)現(xiàn)文本框中輸入中文長度是或是，其他非中文輸入是。因?yàn)橹形妮斎敕ǖ脑诜钦捷斎霑r(shí)，對于我們這個(gè)算法，會出現(xiàn)剩余字符數(shù)為負(fù)值的情況。 textarea,input輸入字符數(shù)限制。 　　在做開發(fā)時(shí)，有一種需求是對輸入框(input,textarea)的字?jǐn)?shù)做限制。如果按照J(rèn)S的規(guī)定，字符串里所有的字符，長度都是1。但是有時(shí)候我們需要實(shí)現(xiàn)文本框中輸入中文長度是2（或是３），...

    figofuture 評論0 收藏0

  • 中文NER的那些事兒5. Transformer相對位置編碼&TENER代碼實(shí)現(xiàn)

    摘要：如果截?cái)嚅L度為，位置編碼的，下圖是的在中給出了一種新的相對位置編碼，幾乎是和經(jīng)典的絕對位置編碼一一對應(yīng)。只是把絕對位置編碼替換成相對位置編碼，在兩個(gè)任務(wù)上都有的效果提升，最終效果也基本和一致。這一章我們主要關(guān)注transformer在序列標(biāo)注任務(wù)上的應(yīng)用，作為2017年后最熱的模型結(jié)構(gòu)之一，在序列標(biāo)注任務(wù)上原生transformer的表現(xiàn)并不盡如人意，效果比bilstm還要差不少，這背后有哪...

    tylin 評論0 收藏0

  • Emoji的編碼以及常見問題處理

    摘要：題外話補(bǔ)充一點(diǎn)是一種字符編碼方法，它是由國際組織設(shè)計(jì)，可以容納全世界所有語言文字的編碼方案。帶有的字符串截取在這類編程語言中一個(gè)中文字符的長度為，但是對大部分的并非全部取長度則是。 我在虎嗅上看過一篇關(guān)于Emoji的趣聞, 特別有意思, 在這里跟大家分享一下。里面提到了Emoji是怎么誕生的。 1999年前后，日本一個(gè)名叫栗田穰崇的年輕人，和許多直男一樣， 給女友發(fā)的短信經(jīng)常會被誤解。...

    wemall 評論0 收藏0

發(fā)表評論

0條評論

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