国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

中文輸入截?cái)鄦?wèn)題

makeFoxPlay / 832人閱讀

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

前幾天一個(gè)項(xiàng)目中需要對(duì)一個(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
    })

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

IME問(wèn)題

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

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

于是便到caniuse和MDN上看看。

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

在vue源碼中尋找答案

vue文檔中有如下一段話

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

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

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

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

但是很明顯composing不是event.target的標(biāo)準(zhǔn)屬性，那是從哪里來(lái)的呢，于是全局搜索了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)

哈哈，原來(lái)就是前面所說(shuō)的compositionstart和compositionend方法。

結(jié)論

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

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

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

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

相關(guān)文章

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

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

    Jingbin_ 評(píng)論0 收藏0

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

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

    figofuture 評(píng)論0 收藏0

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

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

    tylin 評(píng)論0 收藏0

  • Emoji的編碼以及常見(jiàn)問(wèn)題處理

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

    wemall 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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