[英]Non latin characters replace on .keyup() does not work when typing fast
我有jQuery代碼用拉丁字符替換Cyrillic用戶輸入。 當用戶輸入速度不是太快(每分鍾60-70個字符)時這個工作正常,但是當用戶打字速度快於此時,它混合了西里爾字符和拉丁字符,可能是因為無法及時捕獲keyup
事件。 我怎樣才能解決這個問題?
$("input[name*=Name]").not("input[name*=Main]").keyup(function (e) {
if (e.keyCode === 8 || e.keyCode === 46 || e.keyCode === 9 || e.keyCode === 13 || e.keyCode === 17 || e.keyCode === 18 || e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40 || e.keyCode === 16 || e.keyCode === 20) {
return false;
} else {
var englishchars = ["a", "b", "v", "g", "d", "e", "yo", "zh", "z", "i", "yi", "k", "l", "m", "n", "o", "p", "r", "s", "t", "u", "f", "kh", "c", "ch", "sh", "shch", "i", "e", "yu", "ya", ""];
var slavicchars = ["а", "б", "в", "г", "д", "е", "ё", "ж", "з", "и", "й", "к", "л", "м", "н", "о", "п", "р", "с", "т", "у", "ф", "х", "ц", "ч", "ш", "щ", "ы", "э", "ю", "я", "ь"];
var verified = String.fromCharCode(e.wich).match(/[^а-яё]/);
if (verified) {
e.preventDefault();
var lastchar = this.value.length > 1 ? this.value.substr(-1) : this.value;
var russiancharindex = jQuery.inArray(lastchar, slavicchars);
if (russiancharindex > 0) {
var englishcharindex = englishchars[russiancharindex];
this.value = this.value.replace(lastchar, englishcharindex);
} else {
return false;
}
} else {
return false;
}
}
});
(...)可能因為無法及時捕獲keyup事件(...)
這是因為在釋放鍵時會捕獲keyup
事件,而在按下鍵時將字符插入到文本框中。
因此,短暫按下兩個鍵(快速鍵入),兩個字符已經存在於文本框中,然后逐個釋放鍵,您只檢查輸入value
的最后一個字符,但首先發布的鍵被發送到最后一個char之前的一個
var lastchar = this.value.length > 1 ? this.value.substr(-1) : this.value;
var russiancharindex = jQuery.inArray(lastchar, slavicchars);
// ...
也是因為這個原因,當您向后移動光標以在文本中間插入一個字母時,它將無法工作。
這個怎么樣?
在每個keyup
,它將匹配字符串中的每個非ascii字符(而不是僅匹配最后一個字符)。
注意。 更新輸入值將導致光標丟失其當前位置,並將在輸入結束時移動。 為了防止這種情況(如果您在中間某處編輯字段),請在更新之前存儲其位置並在此之后恢復。
(縮短了你的if(e.keyCode ...)
條件並為keyCodes添加了空格[32])
// keep these variables outside of the handler, so that they're not redeclared unnecessarily:
var charsObject = {
'a' : 'а',
'б' : 'b',
'в' : 'v',
// ...
}, keyCodes = [8,46,9,13,17,18,32,37,38,39,40,16,20];
$("input[name*=Name]:not([name*=Main])").keyup(function(e){
if (keyCodes.indexOf( e.keyCode ) < 0) {
// store current cursor position:
var start = this.selectionStart, end = this.selectionEnd;
$(this).val($(this).val().replace(/[^\u0000-\u007f]/g, function(char, key) {
// return replacement letter, or the original letter if it's not a "charsObject" key:
return charsObject[char] || char;
}));
// restore cursor position after field update:
this.setSelectionRange(start, end);
}
});
最后我得到了更好的解決方案。
$("input[name*=Name]:not([name*=Main])").focusout(function (e) {
var englishchars = ["a", "b", "v", "g", "d", "e", "yo", "zh", "z", "i", "yi", "k", "l", "m", "n", "o", "p", "r", "s", "t", "u", "f", "kh", "c", "ch", "sh", "shch", "i", "e", "yu", "ya", "'"];
var slavicchars = ["а", "б", "в", "г", "д", "е", "ё", "ж", "з", "и", "й", "к", "л", "м", "н", "о", "п", "р", "с", "т", "у", "ф", "х", "ц", "ч", "ш", "щ", "ы", "э", "ю", "я", "ь"];
var t = $(this).val().toLowerCase();
var word = new Array();
$.each(t.split(""), function (key, val) {
var verified = String.fromCharCode(e.wich).match(/[^а-яё]/);
if (verified) {
e.preventDefault();
var russiancharindex = jQuery.inArray(val, slavicchars);
if (russiancharindex >= 0) {
var englishcharindex = englishchars[russiancharindex];
word.push(englishcharindex);
} else {
word.push(val);
}
} else {
return false;
}
return word;
});
$(this).val(word.join("").replace(",", ""));
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.