更改按键

Question

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

我并不关心在 IE 中工作的解决方案 - 只是在 Safari、Chrome 和 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 之类的东西）。

Answer 1

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

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

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

Answer 2

我也遇到了这个问题。最后我通过以下代码解决了这个问题：

$('.my_input_box').keyup(function(){
    //my execution code is here
});

它已经过测试。它在我的项目中发挥了作用。

Answer 3

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

• 需要将光标位置设置到 contentEditable div 的末尾，选择和范围对象出现问题

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

对于输入：

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

• 显示与 google chrome 中输入的键盘字符不同的键盘字符

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

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

Answer 4

这是一个使用 Vanilla 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" />

Answer 5

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

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

Answer 6

，您可以对 或 </code> 做的就是确保该值中不包含任何“a”字符：

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

那么 方法可能无法处理所有可能的技巧，你可以用真正替换“按下”字符的东西来实现，但我不知道有什么方法可以真正做到这一点。

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

Answer 7

这是一个不使用任何库的示例

const input = document.querySelector('input')

// this is the order of events into an input
input.addEventListener('focus', onFocus)
input.addEventListener('keydown', keyDown)
input.addEventListener('keypress', keyPress)
input.addEventListener('input', onInput)
input.addEventListener('keyup', keyUp)
input.addEventListener('change', onChange)
input.addEventListener('blur', onBlur)

function onFocus  (event) { info(event) }
function keyDown  (event) { info(event) }
function keyPress (event) {
  info(event)
  // this 2 calls will stop `input` and `change` events
  event.preventDefault();
  event.stopPropagation();
  
  // get current props
  const target = event.target
  const start = target.selectionStart;
  const end = target.selectionEnd;
  const val = target.value;
  
  // get some char based on event
  const char = getChar(event);
  
  // create new value
  const value = val.slice(0, start) + char + val.slice(end);
  
  // first attemp to set value
  // (doesn't work in react because value setter is overrided)
  // target.value = value

  // second attemp to set value, get native setter
  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
    window.HTMLInputElement.prototype,
    "value"
  ).set;
  nativeInputValueSetter.call(target, value);

  // change cursor position
  target.selectionStart = target.selectionEnd = start + 1;
  
  // dispatch `input` again
  const newEvent = new InputEvent('input', {
    bubbles: true,
    inputType: 'insertText',
    data: char
  })
  event.target.dispatchEvent(newEvent);
}
function keyUp    (event) { info(event) }
function onInput  (event) { info(event) }
function onChange (event) { info(event) }
function onBlur   (event) {
  // dispatch `change` again
  const newEvent = new Event('change', { bubbles: true })
  event.target.dispatchEvent(newEvent);
  info(event)
}

function info     (event) { console.log(event.type) }

function getChar(event) {
  // will show X if letter, will show Y if Digit, otherwise Z
  return event.code.startsWith('Key')
    ? 'X'
    : event.code.startsWith('Digit')
      ? 'Y'
      : 'Z'
}

<input type="text">