改变按键

IT技术 javascript jquery events keypress keydown
2021-02-10 11:36:28

在输入框或 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、which 和 keyCode，还有一个“originalEvent”属性，而该属性又具有这些属性。但是，我无法修改这些（我尝试使用 e.originalEvent.charCode = 102 之类的东西）。

6个回答

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

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

对于输入：

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

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

似乎我们必须preventDefault并且stopPropagation在使用 native 时keypress，jQuery返回时false也会这样做。
2021-03-19 11:36:28
谢谢蒂姆。您在提供的第一个链接中编写的函数 insertTextAtCursor() 可以解决问题！
2021-03-20 11:36:28
我将实现“非 IE jsFiddle 示例”并在堆栈和 gitbub 中共享以帮助大家。支持所有其他语言的实现。再次感谢。
2021-04-01 11:36:28
非常感谢蒂姆，我完成了为期一天的研究案例“如何将关键字更改为英语？” 但我没有找到优化 & 小 & 智能，直到找到你的答案。
2021-04-06 11:36:28
这可以在没有 jQuery 的情况下使用吗？使用本机keypress事件时，a和b字符都进入输入。
2021-04-14 11:36:28

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

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

这里一个简单的例子，以取代,以.用香草的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" />

好吧，您可以为 an 做什么，<input>或者<textarea>只是确保该值中没有任何“a”字符：

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

这种方法可能无法处理您可以使用真正替换“按下”字符的东西拉出的所有可能的技巧，但我不知道实际上有什么方法可以做到这一点。

编辑— 哦，我在该示例中输入“修复”发生在超时处理程序中的原因是它确保浏览器有机会处理“按键”事件的本机行为。当超时处理程序代码运行时，我们确信元素的值将被更新。我意识到这段代码有点像货物崇拜。

我不确定这是否“容易”做到，像这样：

$(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()事件。

我同意 - 我只是将其作为一个非常基本的示例进行介绍，这就是我推荐 Simulate 插件的原因。我不确定它有多深入，但它可能值得研究 OP。
2021-03-17 11:36:28
“模拟”按键的代码将非常困难，因为它必须确定文本字段或文本区域或其他任何内容中的当前光标位置。此外，应该确保返回false以防止按键的本机处理。
2021-03-24 11:36:28
其它你可能感兴趣的问题
上一篇生成 JavaScript 数组的排列 下一篇window.onload 什么时候触发？