input 組合事件

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

Start 和 End 事件只執行一次，Update 會執行多次。
輸入前，會觸發 Start 和 Update 事件；沒有選中中文之前，會一直觸發 Update 事件；選中文字後，會觸發 End 事件；一個組合事件完成，以此循環。

compositionstart

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

compositionupdate

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

compositionend

當文本段落的組成完成或取消時, compositionend 事件將被觸發。

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

例子

簡單使用

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

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

輸入中文‘蘇州’後， 刪除‘州’，只會觸發onChange事件：

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

監聽輸入的中文字符變化，如何實現？

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’，只會觸發 onchange 事件：

輸入中文‘蘇州’，然後刪除‘州’，觸發事件如下：

組合事件與 'onchange' 結合使用，就實現了監聽中文字符輸入變化。

input 在手機端觸發軟鍵盤的表現

輸入框聚焦（觸發 focus 事件）後，會彈出軟鍵盤， 表現如下：

IOS 軟鍵盤彈起表現

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

Android 軟鍵盤彈起表現

輸入框獲取焦點後，鍵盤彈起，頁面（webview）高度會發生改變，高度為可視區高度（原高度減去軟鍵盤高度），除了因為頁面內容被撐開可以產生滾動，webview 本身不能滾動。

IOS 軟鍵盤收起表現

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

Android 軟鍵盤收起表現

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

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

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