Javascript 改变按键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4604930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the keypress
提问by maxedison
In an input box or contenteditable=true div, how can I modify a keypress for the letter "a" to return a keybress for the letter "b"? I.e., every time you type the letter "a" in the div, the output is actually the letter "b".
在输入框或 contenteditable=true div 中，如何修改字母“a”的按键以返回字母“b”的按键？即，每次在 div 中键入字母“a”时，输出的实际上是字母“b”。
I'm not that concerned with a solution that works in IE--just one that works in Safari, Chrome, & FF.
我不太关心适用于 IE 的解决方案——只是适用于 Safari、Chrome 和 FF 的解决方案。
In Chrome, I can see that a keypress event has the properties "charCode", "keyCode", and "which", all of which get assigned the keypress event number. If I fire an event on a keypress, I can modify these values, but I can't figure out what to return so that the actual key that gets typed is different. For example:
在 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;
});
I can also see that along with charCode, which, and keyCode, there is also an "originalEvent" property which in turn also has these properties. However, I haven't been able to modify those (I tried with things like e.originalEvent.charCode = 102).
我还可以看到，除了 charCode、which 和 keyCode，还有一个“originalEvent”属性，而该属性又具有这些属性。但是，我无法修改这些（我尝试使用 e.originalEvent.charCode = 102 之类的东西）。
回答by Tim Down
You can't change the character or key associated with a key event, or fully simulate a key event. However, you can handle the keypress yourself and manually insert the character you want at the current insertion point/caret. I've provided code to do this in a number of places on Stack Overflow. For a contenteditableelement:
您无法更改与按键事件关联的字符或按键，也无法完全模拟按键事件。但是，您可以自己处理按键操作并在当前插入点/插入符号处手动插入您想要的字符。我已经在 Stack Overflow 的许多地方提供了代码来执行此操作。对于contenteditable元素：
Here's a jsFiddle example: http://www.jsfiddle.net/Ukkmu/4/
这是一个 jsFiddle 示例：http: //www.jsfiddle.net/Ukkmu/4/
For an input:
对于输入：
Can I conditionally change the character entered into an input on keypress?
show different keyboard character from the typed one in google chrome
Cross-browser jsFiddle example: http://www.jsfiddle.net/EXH2k/6/
跨浏览器jsFiddle示例：http: //www.jsfiddle.net/EXH2k/6/
IE >= 9 and non-IE jsFiddle example: http://www.jsfiddle.net/EXH2k/7/
IE >= 9 和非 IE jsFiddle 示例：http: //www.jsfiddle.net/EXH2k/7/
回答by Boyko Oleksiy
My solution example (change in input[type=text]the character ','to '.'):
我的解决方案示例（input[type=text]将字符更改','为'.'）：
element.addEventListener('keydown', function (event) {
if(event.key === ','){
setTimeout(function() {
event.target.value += '.';
}, 4);
event.preventDefault();
};
回答by Pointy
Well what you could do for an <input>or <textarea>is just make sure that the value doesn't have any "a" characters in it:
好吧，您可以为 an 做些什么，<input>或者<textarea>只是确保该值中没有任何“a”字符：
$('input.whatever').keypress(function() {
var inp = this;
setTimeout(function() {
inp.value = inp.value.replace(/a/g, 'b');
}, 0);
});
This approach probably couldn't handle all the possible tricks you could pull with something that really swapped out the "pressed" character, but I don't know any way to actually do that.
这种方法可能无法处理您可以使用真正替换“按下”字符的东西拉出的所有可能的技巧，但我不知道实际上有什么方法可以做到这一点。
edit— oh, and the reason that I typed in that example with the "fixup" happening in a timeout handler is that it makes sure that the browser has the opportunity to handle the native behavior for the "keypress" event. When the timeout handler code runs, we're sure that the value of the element will have been updated. There's a touch of the cargo cult to this code, I realize.
编辑- 哦，我在该示例中输入“修复”发生在超时处理程序中的原因是它确保浏览器有机会处理“按键”事件的本机行为。当超时处理程序代码运行时，我们确信元素的值将被更新。我意识到这段代码有点像货物崇拜。
回答by RousseauAlexandre
Here a simple example to replace ,to .using Vanilla JavaScript
这里一个简单的例子，以取代,以.用香草的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" />回答by Rion Williams
I'm not sure if this is "easily" do-able, with something like this:
我不确定这是否“容易”做到，像这样：
$(window).keypress(function(e) {
//Captures 'a' or 'A'
if(e.which == 97 || e.which == 65)
{
//Simulate a keypress in a specific field
}
});
I do know that jQuery has a simulate plug-in to simulate keypress events etc, jQuery Simulate. It might be worth looking into - also possibly some type of jQuery Trigger()event.
我知道 jQuery 有一个模拟插件来模拟按键事件等，jQuery Simulate。可能值得研究 - 也可能是某种类型的 jQuery Trigger()事件。
回答by Andrew Luca
Here is an example without using any libraries
这是一个不使用任何库的示例
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">