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

資訊專欄INFORMATION COLUMN

中文輸入截斷問題

makeFoxPlay / 829人閱讀

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

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

    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é)果被測試同學發(fā)現(xiàn)在中文輸入法下回出現(xiàn)如下問題：

IME問題

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

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

于是便到caniuse和MDN上看看。

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

在vue源碼中尋找答案

vue文檔中有如下一段話

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

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

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

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

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

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

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

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

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

結(jié)論

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

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

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

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

相關(guān)文章

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

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

    Jingbin_ 評論0 收藏0

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

    摘要：但是有時候我們需要實現(xiàn)文本框中輸入中文長度是或是，其他非中文輸入是。因為中文輸入法的在非正式輸入時，對于我們這個算法，會出現(xiàn)剩余字符數(shù)為負值的情況。 textarea,input輸入字符數(shù)限制。 　　在做開發(fā)時，有一種需求是對輸入框(input,textarea)的字數(shù)做限制。如果按照JS的規(guī)定，字符串里所有的字符，長度都是1。但是有時候我們需要實現(xiàn)文本框中輸入中文長度是2（或是３），...

    figofuture 評論0 收藏0

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

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

    tylin 評論0 收藏0

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

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

    wemall 評論0 收藏0

發(fā)表評論

0條評論

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