jQuery .keydown()、.keyup() 忽略“I”、“B”
我这里有一些代码，在 TextMate 的网络预览中工作正常，但 Safari 正在做一些我不知道如何解决的事情......
$(document).ready(function(){
$('*[contentEditable="true"]').focusin(function(){
var _self = this;
var isCtrl = false;
// Bind events.
$(window).keyup( function(e) {
if(e.which==17 || e.which == 91) isCtrl=false;
});
$(window).keydown( function(e){
if(e.which==17 || e.which == 91) isCtrl=true;
if(isCtrl) {
console.log(e.which);
switch(e.which) {
case 66: doCommand('bold');
break;
case 67: doCommand('cut');
break;
case 73: doCommand('italic');
break;
case 86: doCommand('paste');
break;
default: break;
}
return false;
}
});
}).focusout(function(){
$(window).unbind();
});
});
当 control + i 或 command + i 被按下，我们应该得到一个事件来使 contentEditable 区域中的文本变为斜体。问题是，虽然其他标准 ASCII/Alpha 字符会触发，但 B 和 I 不会。现在，如果我 preventDefault()，仍然没有任何结果。
我需要用一双新的眼光来看待这个问题。其他人能找到一种解决此问题的方法，并且不会阻止我继续打字吗？
编辑 澄清一下，是的，这与其他文本输入元素（
另外，doCommand 也包含在这里：
doCommand = function(cmd) {
document.execCommand(cmd, null, null);
}
I've got a bit of code here, which works okay in TextMate's web preview, but Safari is doing something that I'm not sure how to get around...
$(document).ready(function(){
$('*[contentEditable="true"]').focusin(function(){
var _self = this;
var isCtrl = false;
// Bind events.
$(window).keyup( function(e) {
if(e.which==17 || e.which == 91) isCtrl=false;
});
$(window).keydown( function(e){
if(e.which==17 || e.which == 91) isCtrl=true;
if(isCtrl) {
console.log(e.which);
switch(e.which) {
case 66: doCommand('bold');
break;
case 67: doCommand('cut');
break;
case 73: doCommand('italic');
break;
case 86: doCommand('paste');
break;
default: break;
}
return false;
}
});
}).focusout(function(){
$(window).unbind();
});
});
When control + i or command + i is pressed, we should get an event to make the text in the contentEditable area italic. The problem is, while other standard ASCII/Alpha character will fire, B and I do not. Now, if I preventDefault(), still nothing.
I need a fresh pair of eyes on this. Can anyone else see a way around this that won't prevent me from typing still?
Edit
To clarify, yes this works fine with other text input elements (<textarea>, <input>, etc.). It's specifically related to contentEditable.
Also, doCommand is included here:
doCommand = function(cmd) {
document.execCommand(cmd, null, null);
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
首先，不需要单独检测修饰键。您可以从
keyup或keydown事件中使用事件的ctrlKey和metaKey属性。其次，在
contenteditable元素中，浏览器已经内置了粗体和斜体命令的键盘快捷键。当然可以拦截你想要的按键。请参阅http://jsfiddle.net/Hq43A/
First, there's no need to detect modifier keys separately. You can find out from the
keyuporkeydownevent whether the cmd or ctrl keys were held down using the event'sctrlKeyandmetaKeyproperties.Second, in
contenteditableelements, keyboard shortcuts for bold and italic commands are already built in by the browser.It's certainly possible to intercept the keypresses you want. See http://jsfiddle.net/Hq43A/
你的 doCommand 函数有问题。
请查看此处并尝试一下。你会看到它在 CTRL + I 上发出“斜体”警报。
尝试将一些警报放入你的函数中，你会发现它在调试时会对你有很大帮助。
You've got something wrong in your doCommand function.
Look here and try it. You'll see it alerts "italic" on CTRL + I.
Try to put some alerts into your function(s), you'll see it will help you a lot when debugging.