中文輸入截斷問題

makeFoxPlay 發布于2019-08-20 16:10 / 827人閱讀

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

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

    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
    })

但是等提到測試環境后，結果被測試同學發現在中文輸入法下回出現如下問題：

IME問題

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

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

于是便到caniuse和MDN上看看。

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

在vue源碼中尋找答案

vue文檔中有如下一段話

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

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

在關于v-model相關代碼中很快就看到了這行代碼

  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")
    }

而這兩個函數是在哪里被調用的呢？就在當前文件內一搜索就找到了。

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

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

結論

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

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

GPU云服務器云服務器輸入中文中文輸入禁止輸入中文禁止中文輸入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82766.html

實時監控用戶輸入--中文輸入解決方案

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

Jingbin_ 2019-08-20 12:20 評論0 收藏0
textarea,input輸入字符數限制。

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

figofuture 2019-08-23 10:47 評論0 收藏0
中文NER的那些事兒5. Transformer相對位置編碼&TENER代碼實現

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

tylin 2021-11-18 10:07 評論0 收藏0
Emoji的編碼以及常見問題處理

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

wemall 2019-07-31 10:54 評論0 收藏0