摘要：在JavaScript中，compositionstart 和 compositionend 事件是用于處理輸入法輸入的兩個重要事件。雖然在日常開發中可能不常用到它們，但對于處理中文、日文等復雜輸入法的...
在JavaScript中，compositionstart 和 compositionend 事件是用于處理輸入法輸入的兩個重要事件。雖然在日常開發中可能不常用到它們，但對于處理中文、日文等復雜輸入法的應用來說，這兩個事件是至關重要的。
什么是compositionstart和compositionend事件？
compositionstart事件在用戶開始使用輸入法輸入文本時觸發，而compositionend事件則在輸入法輸入結束時觸發。這兩個事件通常與文本框或文本區域的輸入事件結合使用，以便在用戶正在輸入文字時進行相應的處理。
為什么需要處理compositionstart和compositionend事件？
在處理中文等復雜輸入時，通常用戶并不是一次性輸入完整的文字，而是在輸入過程中逐步構建文字。例如，在使用中文輸入法時，用戶可能會先輸入一個詞的拼音，然后根據提示選擇合適的文字。在這個過程中，輸入法會通過compositionstart和compositionend事件來通知應用程序正在進行輸入。
如何使用compositionstart和compositionend事件？
下面是一個簡單的例子，演示了如何使用 compositionstart 和 compositionend 事件處理中文輸入：
var inputElement = document.getElementById('input');
inputElement.addEventListener('compositionstart', function(event) {
// 在輸入法開始輸入時執行的操作
console.log('開始輸入文字');
});
inputElement.addEventListener('compositionend', function(event) {
// 在輸入法輸入結束時執行的操作
console.log('輸入結束');
// 這里可以獲取到最終的輸入文字，然后進行相應的處理
console.log('輸入的文字：', event.data);
});在這個例子中，當用戶開始輸入文字時，會觸發compositionstart事件，我們可以在這個事件的處理函數中執行一些預處理操作。當用戶輸入結束時，會觸發compositionend事件，我們可以在這個事件的處理函數中獲取最終的輸入文字，并進行相應的處理。
compositionstart和compositionend的應用場景
現在有一個這樣的需求：當用戶輸入相關文字時，對下面的列表進行搜索，現在的代碼是這樣的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" name="search" id="search">
<ul id="lists">
<li><a href="#">列表</a></li>
<li><a href="#">新增</a></li>
<li><a href="#">修改</a></li>
<li><a href="#">刪除</a></li>
</ul>
<script>
$(document).ready(function() {
$('#search').on('input', function(event) {
var searchText = $(this).val().toLowerCase();
$('#lists li').each(function() {
var linkText = $(this).text().toLowerCase();
if (linkText.includes(searchText)) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
</script>
</body>
</html>代碼看上去沒有問題，但是當輸入中文時，一個中文字符沒有打完，已經對下面文字進行了檢索，而且已經沒有列表文字了，當我們輸入完成中文后，列表的文字又出來了，這顯然不是我們所期望的結果。
這時 CompositionStart 和 CompositionEnd 事件就能派上用場，以下是修改后的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" name="search" id="search">
<ul id="lists">
<li><a href="#">列表</a></li>
<li><a href="#">新增</a></li>
<li><a href="#">修改</a></li>
<li><a href="#">刪除</a></li>
</ul>
<script>
$(document).ready(function() {
var composing = false; // 是否處于中文輸入法的輸入狀態
$('#search').on('input', function(event) {
if (!composing) {
var searchText = $(this).val().toLowerCase();
$('#lists li').each(function() {
var linkText = $(this).text().toLowerCase();
if (linkText.includes(searchText)) {
$(this).show();
} else {
$(this).hide();
}
});
}
});
$('#search').on('compositionstart', function(event) {
composing = true; // 中文輸入法輸入開始
});
$('#search').on('compositionend', function(event) {
composing = false; // 中文輸入法輸入結束
$(this).trigger('input'); // 觸發input事件進行搜索
});
});
</script>
</body>
</html>
