資訊專欄INFORMATION COLUMN
摘要：背景最近開(kāi)發(fā)的韓國(guó)項(xiàng)目，在用戶姓名輸入框一欄中，要求只能輸入韓文，通常用到和兩個(gè)事件來(lái)觸發(fā)方法，并在方法中進(jìn)行校驗(yàn)，但是在瀏覽器中，出現(xiàn)了一種情況，就是韓文單詞拼寫未完成的時(shí)候，會(huì)直接進(jìn)行校驗(yàn)并顯示，如下圖實(shí)例所展示，并不是需要想要的結(jié)果，
背景：最近開(kāi)發(fā)的韓國(guó)項(xiàng)目，在用戶姓名輸入框一欄中，要求只能輸入韓文，通常用到onkeyup和onafterpaste兩個(gè)事件來(lái)觸發(fā)方法，并在方法中進(jìn)行校驗(yàn)，但是在IE瀏覽器中，出現(xiàn)了一種情況，就是韓文單詞拼寫未完成的時(shí)候，會(huì)直接進(jìn)行校驗(yàn)并顯示，如下圖實(shí)例所展示，并不是需要想要的結(jié)果，所以需要進(jìn)行IE兼容；
記錄一下整個(gè)流程：
標(biāo)簽綁定事件標(biāo)簽綁定了onkeyup鍵盤抬起事件以及onafterpaste粘貼文本進(jìn)輸入框兩個(gè)事件，當(dāng)有這兩個(gè)操作時(shí)，就會(huì)觸發(fā)相應(yīng)的校驗(yàn)方法；
校驗(yàn)方法keyup (ev) {
if (!this.imeStatus) {
ev.target.value = ev.target.value.replace(/[^?-??-??-?A-Za-z0-9]/g, "")
}
},
當(dāng)事件觸發(fā)時(shí)，首先會(huì)有個(gè)變量imeStatus校驗(yàn)是否是IE瀏覽器，然后再根據(jù)正則校驗(yàn)進(jìn)行輸入框值的替換，注意：替換的應(yīng)該是當(dāng)前正在輸入的值，并非整個(gè)輸入框包括已經(jīng)輸入的所有值；
if (getBrowser() === "IE") {
window.addEventListener("compositionstart", () => {
this.imeStatus = true
}, false)
window.addEventListener("compositionend", () => {
this.imeStatus = false
}, false)
}
IE瀏覽器的校驗(yàn)：如果是IE瀏覽器，則對(duì)輸入法事件進(jìn)行監(jiān)聽(tīng)，在輸入法錄入開(kāi)始時(shí)，變量imeStatus為true，當(dāng)前輸入的值不進(jìn)行校驗(yàn)，當(dāng)輸入法輸入結(jié)束事件觸發(fā)時(shí)，說(shuō)明拼寫完成，變量imeStatus為false,進(jìn)行校驗(yàn)當(dāng)前拼寫輸入完成的單詞；
function getBrowser () {
const userAgent = navigator.userAgent
if (userAgent.indexOf("OPR") > -1) {
return "Opera"
}
if (userAgent.indexOf("Firefox") > -1) {
return "FF"
}
if (userAgent.indexOf("Trident") > -1) {
return "IE"
}
if (userAgent.indexOf("Edge") > -1) {
return "Edge"
}
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome"
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari"
}
}
對(duì)瀏覽器的判斷：navigator.userAgent獲取當(dāng)前瀏覽器信息；
以上就是我在項(xiàng)目開(kāi)發(fā)過(guò)程中遇到的需要兼容IE的地方；文中提到的是韓文校驗(yàn)，也可以替換成其他語(yǔ)言，根據(jù)自己項(xiàng)目中的具體需求進(jìn)行修改即可；
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102436.html
摘要：不允許負(fù)值用百分比來(lái)定義縮放比例。解決這個(gè)很簡(jiǎn)單，在父元素中使用即可解決該。列寬度由單元格內(nèi)容設(shè)定。定義僅有大寫字母。不過(guò)，要讓任何元素生效還得借助于一點(diǎn)點(diǎn)。 css/css3常用樣式 CSS修改選中文字的顏色 html代碼： 第一段文字選中效果 第二段文字選中效果 css代碼： .p1::selection{background:red;color:#fff;} .p2::selec...
摘要：響應(yīng)禁止包含消息體，因此始終以消息頭后的第一個(gè)空行結(jié)尾。刪除并返回?cái)?shù)組的最后一個(gè)元素。返回該對(duì)象的源代碼。優(yōu)雅降級(jí)一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。 WEB前端面試題的記錄（一） 1、獲取非行間樣式的函數(shù)： function getStyle(obj, attr){ if (obj.currentStyle) { return obj.current...
閱讀 1027·2021-11-22 13:52
閱讀 941·2019-08-30 15:44
閱讀 582·2019-08-30 15:43
閱讀 2437·2019-08-30 12:52
閱讀 3486·2019-08-29 16:16
閱讀 648·2019-08-29 13:05
閱讀 2953·2019-08-26 18:36
閱讀 2007·2019-08-26 13:46
