阻止中文輸入法輸入拼音的時候觸發input事件

Ali_ 發布于2019-08-23 13:07 / 2309人閱讀

摘要：當文本段落的組成完成或取消時事件將被觸發具有特殊字符的觸發需要一系列鍵和其他輸入如語音識別或移動中的字詞建議。

阻止中文輸入法輸入拼音的時候觸發input事件 前言

最近看element-ui源碼的時候看到el-input發現的。這個少見的事件。

compositionstart、compositionend事件（MDN解釋)

compositionstart事件觸發于一段文字的輸入之前（類似于 keydown 事件，但是該事件僅在若干可見字符的輸入之前，而這些可見字符的輸入可能需要一連串的鍵盤操作、語音識別或者點擊輸入法的備選詞）。
當文本段落的組成完成或取消時, compositionend 事件將被觸發 (具有特殊字符的觸發, 需要一系列鍵和其他輸入, 如語音識別或移動中的字詞建議)。

/**
 * @param {Element} elem input元素
 * @param {Function} callback input事件綁定的回調
 */
function inputEvent(elem, callback) {
    let isOnComposition = false;
    elem.addEventListener("compositionstart", function(event) {
        isOnComposition = true;
    })
    elem.addEventListener("compositionend", function(event) {
        isOnComposition = false;
        const val = event.target.value;
        handleInput(val);
    })
    elem.addEventListener("input", function(event) {
        const val = event.target.value;
        handleInput(val);
    })
    function handleInput(val) {
        if (isOnComposition) return;
        callback(val);
    }
}

window.onload = function() {
    const input = document.getElementById("input");
    inputEvent(input, function(val) {
        console.log(val);
    })
}

云服務器 GPU云服務器 js 輸入時觸發事件阻止輸入手機qq拼音輸入法拼音輸入法 c語言

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99225.html

從0開始構建自己的前端知識體系-JS-事件-鍵盤事件總結

摘要：在探尋的過程中發現自己對鍵盤輸入事件的理解還并不到位，以至于有一些代碼看得云里霧里，趕緊查閱資料寫寫總結一下下文所說只在與里做了探究。短按觸發順序長按觸發順序循環事件阻止冒泡這類事件都會冒泡，阻止按照常規調用接口就可以阻止冒泡了。前言最近因一個需求在element-ui的Select組件文檔內找不到對應的示例，也就是filter-method方法的具體使用樣例，嘗試幾次之后也使用了...

Anonymous1 2019-08-22 15:55 評論0 收藏0
解決oninput事件在中文輸入法下會取得拼音的值的問題

摘要：簡單點描述如下在輸入中文或者語音等需要等待一連串的輸入的操作之前，事件會觸發。在輸入中文或者語音等完畢或取消時，事件會觸發。在一段中文輸入完畢后卻并沒有在控制臺輸出任何數據。測試后發現事件是在事件之后觸發的。在做搜索等功能時，很多時候我們需要實時獲取用戶輸入的值，而常常會得到類似 wm 這樣的拼音。為了解決這個問題，我在網上搜索了下相關問題，發現了兩個陌生的事件：compositio...

gclove 2019-08-01 18:16 評論0 收藏0
解決oninput事件在中文輸入法下會取得拼音的值的問題

摘要：簡單點描述如下在輸入中文或者語音等需要等待一連串的輸入的操作之前，事件會觸發。在輸入中文或者語音等完畢或取消時，事件會觸發。在一段中文輸入完畢后卻并沒有在控制臺輸出任何數據。測試后發現事件是在事件之后觸發的。在做搜索等功能時，很多時候我們需要實時獲取用戶輸入的值，而常常會得到類似 wm 這樣的拼音。為了解決這個問題，我在網上搜索了下相關問題，發現了兩個陌生的事件：compositio...

wangbjun 2019-08-22 11:21 評論0 收藏0
說一說限制字數的輸入框踩的坑

摘要：所以最后犧牲了下用戶體驗，找到了一個折中的方式輸入框失去焦點時即，或者用戶輸入回車鍵時才進行內容長度的檢測。當然如果發現輸入框內容超過限制，要將光標停留在輸入框內，方便用戶進行修改。前言最近產品需要做不少輸入框，產品想要的交互效果是：用戶可以輸入中英文，隨著用戶輸入能實時顯示已經輸入的字符個數，當超過數量限制時輸入框邊框變紅，同時給用戶提示信息。這交互聽起來沒啥問題，技術實現上似...

luck 2019-08-21 14:16 評論0 收藏0