在谷歌浏览器中显示不同的键盘字符 [英] show different keyboard character from the typed one in google chrome
问题描述
我正在研究一个旨在使用户能够输入各种非洲语言的javascript键盘。目前，这在IE8和Firefox中运行良好，但不是谷歌浏览器，而且我实际上停留在这一个上。我想要什么例如，键入（在我的物理键盘上）' q '（keyCode = 113）并获得'ɛ'（keyCode = 603）作为输出，但是目前，我的代码在谷歌浏览器中没有任何作用。我的代码的相关部分如下所示：
var k_layouts = {};
k_layouts.Akan = {88：390,113：603}; // Akan语言的keyCode映射
k_layouts.Ga = {120：596,81：400}; // Ga语言的keyCode映射
var current_layout =;
//将**键**键的键码映射到**键**键的功能
函数map_key_code（keycode）{
if（k_layouts [current_layout]&& k_layouts [current_layout] [keycode]）
return k_layouts [current_layout] [keycode];
返回键码;
}
//将**键**键的键码实际改变为**预期**值的功能
function handle_keypress（ev）{
var ev = ev || window.event;
if（ev.bubbles！= null ||！ev.bubbles）
return true;
var target = ev.target || ev.srcElement;
var keyCode = window.event？ ev.keyCode：ev.which;
if（keyCode == 0）
return true;
var newKeyCode = map_key_code（keyCode）;
if（newKeyCode == keyCode）
return true;
if（target.addEventListener）{//对于chrome和firefox
//取消事件
ev.preventDefault（）;
ev.stopPropagation（）;
//使用键码更改创建新事件
var evt = document.createEvent（KeyboardEvent）;
try {// for firefox（works fine）
evt.initKeyEvent（keypress，false，true，document.defaultView，ev.ctrlKey，ev.altKey，ev.shiftKey，ev.metaKey， newKeyCode，newKeyCode）;
catch（e）{//对于google chrome（不按预期工作）
evt.initKeyboardEvent（keydown，false，true，document.defaultView，ev.ctrlKey， ev.altKey，ev.shiftKey，ev.metaKey，newKeyCode，newKeyCode）;
}
//派发新事件
target.dispatchEvent（evt）;
}
else if（target.attachEvent）{//用于IE
ev.keyCode = newKeyCode;
}
}
有没有办法实现我想要做的事情或者，在我的方法中是否存在一些缺失的内容？我很乐意提供任何帮助和任何想法。 解决方案
不会创建一个新事件，因为您所观察到的并不是普遍支持的，而是取消该事件并插入与所键入字符对应的映射字符。
假设用户正在输入一个id为ta的textarea，下面将在所有主要浏览器中处理该textarea的键盘输入，将 q 映射到ɛ和所有其他字符以X作为说明。
请注意，IE<问题; = 8与代码找到选择做换行符，下面的代码为简洁起见不处理。你可以在这里获得我的跨浏览器功能来正确处理这个问题：是否有Internet Explorer批准的替代品selectionStart和selectionEnd？
var charMap = {
q：ɛ
};
document.getElementById（ta）。onkeypress = function（evt）{
var val = this.value;
evt = evt || window.event;
//确保我们只处理可打印的键，不包括输入和空格
var charCode = typeof evt.which ==number？ evt.which：evt.keyCode; （charCode&& charCode！= 13&& charCode！= 32）{
var keyChar = String.fromCharCode（charCode）;
if
//获取映射字符（默认为X用于说明目的）
var mappedChar = charMap [keyChar] || X;
var start，end;
if（typeof this.selectionStart ==number&& typeof this.selectionEnd ==number）{
//非IE浏览器和IE 9
start = this .selectionStart;
end = this.selectionEnd;
this.value = val.slice（0，start）+ mappedChar + val.slice（end）;
//移动插入符
this.selectionStart = this.selectionEnd = start + 1;
} else if（document.selection&& document.selection.createRange）{
//对于版本8以前的版本
var selectionRange = document.selection.createRange（）;
var textInputRange = this.createTextRange（）;
var precedingRange = this.createTextRange（）;
var bookmark = selectionRange.getBookmark（）;
textInputRange.moveToBookmark（bookmark）;
precedingRange.setEndPoint（EndToStart，textInputRange）;
start = precedingRange.text.length;
end = start + selectionRange.text.length;
this.value = val.slice（0，start）+ mappedChar + val.slice（end）;
start ++;
//移动插入符
textInputRange = this.createTextRange（）;
textInputRange.collapse（true）;
textInputRange.move（character，start - （this.value.slice（0，start）.split（\r\\\
）。length - 1））;
textInputRange.select（）;
}
return false;
}
};
I'm working on a javascript keyboard that seeks to enable users to type in various African languages.Currently, this works fine in IE8 and firefox but not google chrome, and I'm actually stuck on this one.What I want to accomplish is for example, to type(on my physical keyboard) 'q'(keyCode=113) and get 'ɛ'(keyCode=603) as the output but currently, my code does nothing in google chrome. The relevant portion of my code is as follows:
var k_layouts = {};
k_layouts.Akan = {88:390,113:603};//keyCode mappings for Akan language
k_layouts.Ga = {120:596,81:400};//keyCode mappings for Ga language
var current_layout = "";
//function that maps the keyCode of a **typed** key to that of the **expected** key
function map_key_code(keycode){
if(k_layouts[current_layout] && k_layouts[current_layout][keycode])
return k_layouts[current_layout][keycode];
return keycode;
}
//function that actually changes the keyCode of a **typed** key to the **expected** value
function handle_keypress(ev){
var ev = ev || window.event;
if(ev.bubbles != null ||!ev.bubbles)
return true;
var target = ev.target || ev.srcElement;
var keyCode = window.event? ev.keyCode: ev.which;
if(keyCode == 0)
return true;
var newKeyCode = map_key_code(keyCode);
if(newKeyCode == keyCode)
return true;
if(target.addEventListener){ //for chrome and firefox
//cancel event
ev.preventDefault();
ev.stopPropagation();
//create new event with the keycode changed
var evt = document.createEvent("KeyboardEvent");
try{//for firefox(works fine)
evt.initKeyEvent("keypress",false,true,document.defaultView,ev.ctrlKey,ev.altKey,ev.shiftKey,ev.metaKey,newKeyCode,newKeyCode);
}
catch(e){// for google chrome(does not work as expected)
evt.initKeyboardEvent("keydown",false,true,document.defaultView,ev.ctrlKey,ev.altKey,ev.shiftKey,ev.metaKey,newKeyCode,newKeyCode);
}
//dispatch new event
target.dispatchEvent(evt);
}
else if(target.attachEvent){// works for IE
ev.keyCode = newKeyCode;
}
}
Is there a way of achieving what I seek to do in chrome?Or, is there something I'm missing in my approach?I'd be glad for any help, and any thoughts.
It would be easier not to create a new event, which as you observed is not universally supported, and instead cancel the event and insert the mapped character corresponding to the character typed.
Assuming the user is typing into a textarea with id "ta", the following will handle keyboard input for that textarea in all the major browsers, mapping q to ɛ and all other characters to "X" for illustrative purposes.
Be aware that there are issues in IE <= 8 with the code for finding the selection to do with line breaks that the following code doesn't handle for the sake of brevity. You can get my cross browser function for handling this correctly here: Is there an Internet Explorer approved substitute for selectionStart and selectionEnd?
var charMap = {
"q": "ɛ"
};
document.getElementById("ta").onkeypress = function(evt) {
var val = this.value;
evt = evt || window.event;
// Ensure we only handle printable keys, excluding enter and space
var charCode = typeof evt.which == "number" ? evt.which : evt.keyCode;
if (charCode && charCode != 13 && charCode != 32) {
var keyChar = String.fromCharCode(charCode);
// Get the mapped character (default to "X" for illustration purposes)
var mappedChar = charMap[keyChar] || "X";
var start, end;
if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
// Non-IE browsers and IE 9
start = this.selectionStart;
end = this.selectionEnd;
this.value = val.slice(0, start) + mappedChar + val.slice(end);
// Move the caret
this.selectionStart = this.selectionEnd = start + 1;
} else if (document.selection && document.selection.createRange) {
// For IE up to version 8
var selectionRange = document.selection.createRange();
var textInputRange = this.createTextRange();
var precedingRange = this.createTextRange();
var bookmark = selectionRange.getBookmark();
textInputRange.moveToBookmark(bookmark);
precedingRange.setEndPoint("EndToStart", textInputRange);
start = precedingRange.text.length;
end = start + selectionRange.text.length;
this.value = val.slice(0, start) + mappedChar + val.slice(end);
start++;
// Move the caret
textInputRange = this.createTextRange();
textInputRange.collapse(true);
textInputRange.move("character", start - (this.value.slice(0, start).split("\r\n").length - 1));
textInputRange.select();
}
return false;
}
};
这篇关于在谷歌浏览器中显示不同的键盘字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
