目錄
如何監聽input輸入框中的中文輸入？
一般常用 input 事件監聽 input 輸入框的內容輸入，但是 input 事件不能識別輸入法的輸入。即，當在 input 輸入框中使用中文輸入法輸入漢字時，input 事件會在監聽到最終輸入的漢字之前，監聽到輸入的所有的中文拼音（英文字母）。所以如果想要在使用輸入法輸入時只監聽輸入法輸入的最終結果的時候，就不能只是簡單的使用 input 事件了。
這里的 input 事件指的是 oninput 事件
使用的事件
使用 compositionstart 和 compositionend 兩個事件（事件名就是全小寫）
- compositionstart 事件是在輸入法開始輸入的時候觸發
- compositionend 事件是在輸入法結束輸入的時候觸發
compositionstart、compositionend 與 input 事件的執行順序是：compositionstart > input > compositionend
如何判斷當前是否是輸入法輸入呢？
在事件之外，設置一個 flag，判斷當前是否是輸入法輸入。缺省為非輸入法輸入
- 因為事件的執行順序是
compositionstart > input > compositionend，所以可以在 compositionstart 中設置 flag 為 true，表示現在開始輸入法輸入 - input 事件中，判斷 flag 是否為 true。如果 flag 為 true，表示當前正在使用輸入法輸入，不做處理；否則獲取輸入的內容
- 在 compositionend 中設置 flag 為 false，表示輸入法輸入結束
如何拿到 input 中的所有被輸入的內容呢？
與 flag 的設計相似。在事件之外設置一個可變的 string 類型變量，這里假定為 content。
- 在 compositionend 中
content += 輸入的值 - 在 input 中，判斷 flag。如果是 false，表示是非輸入法輸入，
content += 輸入的值 - content 的值就是 input 輸入框中所有被輸入的內容了
測試源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input id="frame" type="text" />
<script>
let content = "";
let compositionstart = false;
// 輸入法輸入開始時執行；如果不是輸入法輸入，不觸發
frame.addEventListener("compositionstart", e => {
compositionstart = true;
console.log("compositionstart", e);
});
frame.addEventListener("compositionend", e => {
compositionstart = false;
content += e.data;
console.log("compositionend", e);
});
frame.addEventListener("input", e => {
if (compositionstart) {
return;
}
content += e.data;
console.log("input input", e);
});
frame.addEventListener("blur", e => {
console.log("輸入的最終內容:", content);
});
</script>
</body>
</html>
補充說明 compositionupdate
compositionupdate 事件會捕獲輸入法輸入的所有英文字母，類同input事件