input 組合事件

compositionEvent 組合事件是拆分了不同步驟的事件的組合，是由 compositionStart，compositionUpdate 和 compositionEnd三個(gè)事件組合而成。

Start 和 End 事件只執(zhí)行一次，Update 會(huì)執(zhí)行多次。
輸入前，會(huì)觸發(fā) Start 和 Update 事件；沒(méi)有選中中文之前，會(huì)一直觸發(fā) Update 事件；選中文字后，會(huì)觸發(fā) End 事件；一個(gè)組合事件完成，以此循環(huán)。

compositionstart

輸入法編輯器開(kāi)始新的輸入合成時(shí)會(huì)觸發(fā) compositionstart事件。
例如：當(dāng)用戶使用拼音輸入法開(kāi)始輸入漢字時(shí)，這個(gè)事件就會(huì)被觸發(fā)。

compositionupdate

字符被輸入到一段文字的時(shí)候（這些可見(jiàn)字符的輸入可能需要一連串的鍵盤(pán)操作、語(yǔ)音識(shí)別或者點(diǎn)擊輸入法的備選詞）會(huì)觸發(fā) compositionupdate 事件。

compositionend

當(dāng)文本段落的組成完成或取消時(shí), compositionend 事件將被觸發(fā)。

注意：清除鍵、粘貼、英文字母和數(shù)字是不會(huì)觸發(fā)這幾個(gè)事件的。Start 和 Update 事件會(huì)在 onChange 之前觸發(fā)，End 事件在onChange之后觸發(fā)。

例子

簡(jiǎn)單使用

<input 
  placeholder="Basic usage" 
  onChange={e => console.log('onchange', e.target.value)}
  onCompositionStart={e => console.log('onCompositionStart', e.target.value)}
  onCompositionUpdate={e => console.log('onCompositionUpdate', e.target.value)}
  onCompositionEnd={e => console.log('onCompositionEnd', e.target.value)}
/>

輸入英文'suzhou', 只會(huì)觸發(fā)onChange事件：

輸入中文‘蘇州’，觸發(fā)事件如下：

輸入中文‘蘇州’后， 刪除‘州’，只會(huì)觸發(fā)onChange事件：

 直接使用 onCompositionEnd事件，只能監(jiān)聽(tīng)到輸入改變，不能監(jiān)聽(tīng)到刪除。

監(jiān)聽(tīng)輸入的中文字符變化，如何實(shí)現(xiàn)？

let isOnComposition = false
function handleComposition(e) {
  console.log(e.type, e.target.value)
  if (e.type === 'compositionend') {
    isOnComposition = false
    if (!isOnComposition) {
      onChange(e);
    }
  } else {
    isOnComposition = true
  }
}
function onChange(e) {
  if (!isOnComposition) {
    console.log('onChange', e.target.value)
  }
}
ReactDOM.render(
 <input
  placeholder="Basic usage" 
  onChange={onChange}
  onCompositionStart={handleComposition} 
  onCompositionUpdate={handleComposition} 
  onCompositionEnd={handleComposition} 
/>, mountNode);

輸入英文‘suzhou’，只會(huì)觸發(fā) onchange 事件：

輸入中文‘蘇州’，然后刪除‘州’，觸發(fā)事件如下：

 組合事件與 'onchange' 結(jié)合使用，就實(shí)現(xiàn)了監(jiān)聽(tīng)中文字符輸入變化。

input 在手機(jī)端觸發(fā)軟鍵盤(pán)的表現(xiàn)

輸入框聚焦（觸發(fā) focus 事件）后，會(huì)彈出軟鍵盤(pán)， 表現(xiàn)如下：

IOS 軟鍵盤(pán)彈起表現(xiàn)

輸入框獲取焦點(diǎn)后，鍵盤(pán)彈起，頁(yè)面（webview）沒(méi)有被壓縮，頁(yè)面可使區(qū)域高度（height）還是原高度，只是頁(yè)面（webview）整體往上滾了，且最大滾動(dòng)高度（scrollTop）為軟鍵盤(pán)高度。

Android 軟鍵盤(pán)彈起表現(xiàn)

輸入框獲取焦點(diǎn)后，鍵盤(pán)彈起，頁(yè)面（webview）高度會(huì)發(fā)生改變，高度為可視區(qū)高度（原高度減去軟鍵盤(pán)高度），除了因?yàn)轫?yè)面內(nèi)容被撐開(kāi)可以產(chǎn)生滾動(dòng)，webview 本身不能滾動(dòng)。

IOS 軟鍵盤(pán)收起表現(xiàn)

觸發(fā)軟鍵盤(pán)上的“收起”按鈕鍵盤(pán)或者輸入框以外的頁(yè)面區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤(pán)收起，會(huì)觸發(fā) blur事件。

Android 軟鍵盤(pán)收起表現(xiàn)

觸發(fā)輸入框以外的區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤(pán)收起。但是，觸發(fā)鍵盤(pán)上的收起按鈕鍵盤(pán)時(shí)，軟鍵盤(pán)收起，輸入框不會(huì)失去焦點(diǎn)，不會(huì)觸發(fā) blur事件。

綜合上面鍵盤(pán)彈起和收起在 IOS 和 Android 上的不同表現(xiàn)，需要分開(kāi)處理來(lái)監(jiān)聽(tīng)軟鍵盤(pán)的彈起和收起：

• 在 IOS 上，監(jiān)聽(tīng)輸入框的 focus 事件來(lái)獲知軟鍵盤(pán)彈起，監(jiān)聽(tīng)輸入框的 blur 事件獲知軟鍵盤(pán)收起。
• 在 Android 上，監(jiān)聽(tīng) webview 高度會(huì)變化，高度變小獲知軟鍵盤(pán)彈起，否則軟鍵盤(pán)收起。

以上就是詳解input組合事件如何監(jiān)聽(tīng)輸入中文的詳細(xì)內(nèi)容，更多關(guān)于input組合事件監(jiān)聽(tīng)輸入中文的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論