在前面

input輸入框大家應該都很熟悉了吧，不知道大家有沒有遇到過這樣的一種情況：如上圖，在中文輸入過程中，輸入的拼音也會觸發input框的input事件，有些時候我們并不希望在中文輸入的過程中拼音觸發input事件。

在日常開發中，輸入框是一個常見的組件，但是在拼音輸入過程中，每次輸入都會觸發input事件，這可能會導致不必要的操作。本文將介紹一種解決該問題的Vue指令，使得在拼音輸入過程中不會觸發input事件，從而優化輸入框體驗。

效果展示

實現原理

1、compositionstart和compositionend事件

我們需要了解compositionstart和compositionend兩個事件。當用戶開始輸入拼音時，會觸發compositionstart事件，此時輸入框的值并沒有真正改變。隨著輸入的進行，最終會觸發compositionend事件，此時輸入框的值才會真正改變。我們可以通過監聽這兩個事件，來控制何時觸發input事件。

具體實現方式是，在監聽到compositionstart事件時，將輸入框的值存儲下來，然后在監聽到compositionend事件時，再將輸入框的值與之前存儲的值進行比較，如果不同，則觸發自定義的input事件，并將新值作為參數傳遞給監聽器。

2、代碼實現

（1）輸入框

html復制代碼<div class="input-text-title">正常情況</div>
<div class="input-text-content">{{ inputText }}</div>
<input
    placeholder="請輸入"
    class="input-text"
    @input="doInput"
    id="inputContent"
/>

簡單定義一個輸入框，監聽其input事件，inputText保存實時輸入內容并展示到頁面上。

（2）監聽compositionstart和compositionend事件

javascript復制代碼const inputContent = document.getElementById("inputContent");
inputContent.addEventListener("compositionstart", () => {
    this.isComposing = true;
    this.inputComplate(inputContent.value);
});
inputContent.addEventListener("compositionend", () => {
    this.isComposing = false;
    if (inputContent.value !== this.inputText) {
        this.inputComplate(inputContent.value);
    }
});

首先，我們通過getElementById方法獲取到id為"inputContent"的輸入框元素，并將其賦值給inputContent常量。

然后，我們給inputContent元素添加compositionstart事件的監聽器。在事件觸發時，會執行回調函數。在回調函數中，我們將isComposing變量設置為true，表示正在進行拼音輸入，然后調用inputComplate方法處理輸入框的值，并將輸入框的值作為參數傳遞給inputComplate方法。

接下來，我們給inputContent元素添加compositionend事件的監聽器。在事件觸發時，同樣會執行回調函數。在回調函數中，我們將isComposing變量設置為false，表示拼音輸入結束，然后同樣調用inputComplate方法處理輸入框的值，并將輸入框的值作為參數傳遞給inputComplate方法。

通過監聽這兩個事件，并在事件觸發時調用相應的處理方法，我們可以實現在拼音輸入過程中控制input事件的觸發時機，從而達到不觸發input事件的效果。

（3）input事件判斷是否正在輸入拼音

javascript復制代碼inputComplate(value) {
    this.inputText = value;
},
doInput(event) {
    if (this.isComposing) return;
    const value = event.target.value;
    this.inputComplate(value);
},

輸入框input事件綁定的是doInput方法，這個方法在這里只是用于過渡一下，在這里我們需要判斷當前是否正在輸入拼音，如果是在輸入拼音的話我們就直接返回，不進行后續操作，如果不是的話則調用inputComplate進行后續處理，真正的處理邏輯應該是在inputComplate方法中。

這樣我們就簡單的完成了一個忽略拼音輸入過程中的input事件的功能

本文到此結束

且慢，雖然上面這樣操作之后可以得到一個可以忽略拼音輸入過程中的input事件的輸入框；但是，如果我們有很多個輸入框需要加上這個功能呢？這樣的話我們每寫一個input框，想要加上這個功能的話不還得加一堆亂七八糟的代碼來處理，這明顯很不合理。

（4）封裝成一個vue指令

javascript復制代碼export default {
    bind(el, binding) {
        let isComposing = false;
        let value = "";
        
        el.addEventListener("compositionstart", () => {
            isComposing = true;
            value = el.value;
        });

        el.addEventListener("compositionend", () => {
            isComposing = false;
            if (value !== el.value) {
                binding.value(el.value);
            }
        });

        // 添加自定義的input事件監聽器
        el.addEventListener("input", (event) => {
            if (isComposing) {
                return;
            }
            const value = event.target.value;
            // 處理輸入框的值
            binding.value(value);
        });
    },
};
html復制代碼<input
    placeholder="輸入試試"
    class="input-text"
    v-JIgnorePinyin="doInput1"
/>

在bind鉤子函數中，我們首先定義了兩個變量isComposing和value，分別用于記錄是否正在進行拼音輸入和輸入框的值。

然后，我們給輸入框元素el添加compositionstart事件的監聽器。在事件觸發時，將isComposing設置為true，表示正在進行拼音輸入，并將輸入框的值賦給value。

接下來，我們給輸入框元素el添加compositionend事件的監聽器。在事件觸發時，將isComposing設置為false，表示拼音輸入結束。然后，我們比較value和輸入框的當前值el.value是否相等，如果不相等，則說明輸入框的值已經發生了變化，此時我們調用binding.value方法，將當前輸入框的值el.value作為參數傳遞給綁定該指令的處理函數。

最后，我們給輸入框元素el添加input事件的監聽器。在事件觸發時，首先判斷isComposing的值，如果為true，則直接返回，不做任何處理。如果isComposing的值為false，說明拼音輸入已經完成，此時我們獲取輸入框的值event.target.value，并將其作為參數調用binding.value方法，從而處理輸入框的值。

通過定義這個自定義指令，我們可以在Vue組件中使用它來監聽拼音輸入過程中的事件，并執行相應的處理邏輯，從而實現更加靈活的輸入框交互。

這樣的話后面需要加功能只需要一個指令即可搞定。

組件庫

組件文檔

目前該組件也已經收錄到我的組件庫，組件文檔地址如下： jyeontu.xyz/jvuewheel/#…

組件內容

組件庫中還有許多好玩有趣的組件，如：

• 懸浮按鈕
• 評論組件
• 詞云
• 瀑布流照片容器
• 視頻動態封面
• 3D輪播圖
• web桌寵
• 貢獻度面板
• 拖拽上傳
• 自動補全輸入框
• 圖片滑塊驗證

等等……

組件庫源碼

組件庫已開源到gitee，有興趣的也可以到這里看看：gitee.com/zheng_yongt…

覺得有幫助的可以點個star~

有什么問題或錯誤可以指出，歡迎pr~

有什么想要實現的組件或想法可以聯系我~

作者：JYeontu

鏈接：https://juejin.cn/post/7330439494666223642

<input placeholder="提示的文字">

<input type="text" placeholder="這里是提示的文字">

<input type="text" onfocus="javascript：if(this.value=='請輸入內容')this.value='';">