input 組合事件

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

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

compositionstart

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

compositionupdate

字符被輸入到一段文字的時候（這些可見字符的輸入可能需要一連串的鍵盤操作、語音識別或者點擊輸入法的備選詞）會觸發(fā) compositionupdate 事件。

compositionend

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

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

例子

簡單使用

<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', 只會觸發(fā)onChange事件：

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

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

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

監(jiān)聽輸入的中文字符變化，如何實現(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’，只會觸發(fā) onchange 事件：

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

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

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

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

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

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

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

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

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

觸發(fā)軟鍵盤上的“收起”按鈕鍵盤或者輸入框以外的頁面區(qū)域時，輸入框失去焦點，軟鍵盤收起，會觸發(fā) blur事件。

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

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

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

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

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

最新評論