更改按键

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,和keyCode之外,还有一个"originalEvent"属性,而这个属性又具有这些属性.但是,我无法修改那些(我试过像e.originalEvent.charCode = 102这样的东西).

Answer 1

您无法更改与键事件关联的字符或键,也无法完全模拟键事件.但是,您可以自己处理按键并在当前插入点/插入符号处手动插入所需的字符.我已经在Stack Overflow上的许多地方提供了代码来执行此操作.对于contenteditable元素:

• 需要将光标位置设置为contentEditable div的末尾,与选择和范围对象一起发出问题

这是一个jsFiddle示例:http://www.jsfiddle.net/Ukkmu/4/

输入:

• 我可以有条件地更改在按键上输入的输入字符吗？

• 显示谷歌浏览器中键入的键盘字符

跨浏览器jsFiddle示例:http://www.jsfiddle.net/EXH2k/6/

IE> = 9和非IE jsFiddle示例:http://www.jsfiddle.net/EXH2k/7/

Answer 2

我的解决方案示例（input[type=text]将字符更改','为'.'）：

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

Answer 3

这里一个简单的例子，以取代,以.用香草的JavaScript

// change ',' to '.'
document.getElementById('only_float').addEventListener('keypress', function(e){
    if (e.key === ','){
        // get old value
        var start = e.target.selectionStart;
        var end = e.target.selectionEnd;
        var oldValue = e.target.value;

        // replace point and change input value
        var newValue = oldValue.slice(0, start) + '.' + oldValue.slice(end)
        e.target.value = newValue;

        // replace cursor
        e.target.selectionStart = e.target.selectionEnd = start + 1;

        e.preventDefault();
    }
})

<input type="text" id="only_float" />