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