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