資訊專欄INFORMATION COLUMN
摘要：當文本段落的組成完成或取消時事件將被觸發(fā)具有特殊字符的觸發(fā)需要一系列鍵和其他輸入如語音識別或移動中的字詞建議。
阻止中文輸入法輸入拼音的時候觸發(fā)input事件 前言
最近看element-ui源碼的時候看到el-input發(fā)現(xiàn)的。這個少見的事件。
compositionstart、compositionend事件（MDN解釋)compositionstart事件觸發(fā)于一段文字的輸入之前（類似于 keydown 事件，但是該事件僅在若干可見字符的輸入之前，而這些可見字符的輸入可能需要一連串的鍵盤操作、語音識別或者點擊輸入法的備選詞）。
當文本段落的組成完成或取消時, compositionend 事件將被觸發(fā) (具有特殊字符的觸發(fā), 需要一系列鍵和其他輸入, 如語音識別或移動中的字詞建議)。
/**
* @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);
})
}
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/99225.html
摘要：在探尋的過程中發(fā)現(xiàn)自己對鍵盤輸入事件的理解還并不到位，以至于有一些代碼看得云里霧里，趕緊查閱資料寫寫總結一下下文所說只在與里做了探究。短按觸發(fā)順序長按觸發(fā)順序循環(huán)事件阻止冒泡這類事件都會冒泡，阻止按照常規(guī)調用接口就可以阻止冒泡了。 前言 最近因一個需求在element-ui的Select組件文檔內找不到對應的示例，也就是filter-method方法的具體使用樣例，嘗試幾次之后也使用了...
摘要：簡單點描述如下在輸入中文或者語音等需要等待一連串的輸入的操作之前，事件會觸發(fā)。在輸入中文或者語音等完畢或取消時，事件會觸發(fā)。在一段中文輸入完畢后卻并沒有在控制臺輸出任何數(shù)據(jù)。測試后發(fā)現(xiàn)事件是在事件之后觸發(fā)的。 在做搜索等功能時，很多時候我們需要實時獲取用戶輸入的值，而常常會得到類似 wm 這樣的拼音。為了解決這個問題，我在網(wǎng)上搜索了下相關問題，發(fā)現(xiàn)了兩個陌生的事件：compositio...
摘要：簡單點描述如下在輸入中文或者語音等需要等待一連串的輸入的操作之前，事件會觸發(fā)。在輸入中文或者語音等完畢或取消時，事件會觸發(fā)。在一段中文輸入完畢后卻并沒有在控制臺輸出任何數(shù)據(jù)。測試后發(fā)現(xiàn)事件是在事件之后觸發(fā)的。 在做搜索等功能時，很多時候我們需要實時獲取用戶輸入的值，而常常會得到類似 wm 這樣的拼音。為了解決這個問題，我在網(wǎng)上搜索了下相關問題，發(fā)現(xiàn)了兩個陌生的事件：compositio...
摘要：所以最后犧牲了下用戶體驗，找到了一個折中的方式輸入框失去焦點時即，或者用戶輸入回車鍵時才進行內容長度的檢測。當然如果發(fā)現(xiàn)輸入框內容超過限制，要將光標停留在輸入框內，方便用戶進行修改。 前言 最近產(chǎn)品需要做不少輸入框，產(chǎn)品想要的交互效果是：用戶可以輸入中英文，隨著用戶輸入能實時顯示已經(jīng)輸入的字符個數(shù)，當超過數(shù)量限制時輸入框邊框變紅，同時給用戶提示信息。 這交互聽起來沒啥問題，技術實現(xiàn)上似...
閱讀 2132·2021-11-11 16:55
閱讀 1558·2019-08-30 15:54
閱讀 857·2019-08-29 15:34
閱讀 2374·2019-08-29 13:11
閱讀 2990·2019-08-26 13:28
閱讀 1977·2019-08-26 10:49
閱讀 1078·2019-08-26 10:40
閱讀 2656·2019-08-23 18:21
