更改按键

Question

在输入框或contenteditable = true div中，如何修改字母“a”的按键以返回字母“b”的按键？也就是说，每次在div中键入字母“a”时，输出实际上都是字母“b”。

我不是那种在IE中工作的解决方案 - 只有一种适用于Safari，Chrome，& FF。

在Chrome中，我可以看到按键事件具有属性“charCode”，“keyCode”和“which”，所有这些都被分配了按键事件编号。如果我在按键上触发了一个事件，我可以修改这些值，但我无法弄清楚返回的内容，因此键入的实际键是不同的。例如：

$(window).keypress(function(e){ //$(window) is a jQuery object 
    e.charCode = 102; 
    e.which = 102; 
    e.keyCode = 102; 
    console.log(e); 
    return e; 
}); 

我也可以看到，则charCode，其中，和键一起，还有一个“originalEvent”属性，它反过来也具有这些特性。但是，我一直无法修改这些（我尝试了诸如e.originalEvent.charCode = 102之类的东西）。

Answer 1

您不能更改与某个按键事件关联的字符或按键，或者完全模拟按键事件。但是，您可以自己处理按键，并在当前插入点/插入符处手动插入所需的字符。我已经提供了代码在Stack Overflow的许多地方执行此操作。对于contenteditable元件：

• Need to set cursor position to the end of a contentEditable div, issue with selection and range objects

这里的一个的jsfiddle例如：http://www.jsfiddle.net/Ukkmu/4/

对于输入：

• Can I conditionally change the character entered into an input on keypress?

• show different keyboard character from the typed one in google chrome

跨浏览器的jsfiddle例如：http://www.jsfiddle.net/EXH2k/6/

IE> = 9和非IE的jsfiddle例如：http://www.jsfiddle.net/EXH2k/7/

Answer 2

你可以为一个<input>或<textarea>做那么什么是公正，确保该值不具有任何“一”字：

$('input.whatever').keypress(function() { 
    var inp = this; 
    setTimeout(function() { 
    inp.value = inp.value.replace(/a/g, 'b'); 
    }, 0); 
}); 

这种做法可能无法处理所有可能的这些技巧你可以用真正换出“压制”角色的东西来拉动，但我不知道有什么办法可以做到这一点。

编辑 —哦，那我在这个例子中键入与“修正”的超时处理发生的原因是，它可以确保浏览器有机会处理的“按键”本地行为事件。当超时处理程序代码运行时，我们确信元素的值将被更新。我意识到，这个代码有一点点的难度。

Answer 3

我不知道这是否是“容易”做，能，像这样的东西：

$(window).keypress(function(e) { 
    //Captures 'a' or 'A' 
    if(e.which == 97 || e.which == 65) 
    { 
     //Simulate a keypress in a specific field 
    } 
}); 

我知道，jQuery有一个模拟插件模拟按键事件等，jQuery Simulate。这可能是值得研究的 - 也可能是某种类型的jQuery Trigger()事件。

Answer 4

我的解决方案的例子（在input[type=text]字符','到'.'变化）：

element.addEventListener('keydown', function (event) { 
if(event.key === ','){ 
    setTimeout(function() { 
    event.target.value += '.'; 
    }, 4); 
    event.preventDefault(); 
};