JQuery或JavaScript:如何确定在单击定位标记超链接时是否按下了Shift键?


92

我有一个调用JavaScript函数的锚标记。

有或没有JQuery,如何确定单击链接时Shift键是否按下?

以下代码不起作用,因为仅在按下“真实键”(而非Shift键)的情况下才触发按键。(我希望仅按Shift键就能触发。)

var shifted = false;

$(function() {                           
    $(document).keypress(function(e) {
        shifted = e.shiftKey;
        alert('shiftkey='+e.shiftkey);
    });

    $(document).keyup(function(e) {
        shifted = false;
    });
}

...

function myfunction() {
  //shift is always false b/c keypress not fired above
}

4
以下代码也不起作用,因为您键入的shiftkey不是shiftKey:-)
Simon_Weaver

如果您需要避免在按下时调用处理程序shift+click,请使用filter-altered-clicks
fregante

Answers:


100
    $(document).on('keyup keydown', function(e){shifted = e.shiftKey} );

21
这对我shift有用,但是中断了自函数返回以来不涉及的所有标准快捷方式false。我需要明确return true允许CRTL + R,CTRL + S,按Ctrl + P等
约翰•H•

4
因此,建议使用keydown而不是keypress。
rwitzel

奇怪的是,我只收到keydown事件,没有keyup。
格里

@rwitzel keydown和keyup允许您跟踪Shift键的实际状态,因为它们是键盘上每个键的触发状态。并非总是触发按键,例如,仅按下Shift键时不会触发。
jakubiszon

@Gerry,可能是您的页面上还有其他事件处理程序破坏了事件链。首先检查空白页/新页(其中不包含所有脚本的页)-它会正常工作。
jakubiszon,

74

这是JavaScript中每个击键的键代码。您可以使用它来检测用户是否按下了Shift键。

backspace           8
tab                 9
enter               13
shift               16
ctrl                17
alt                 18
pause/break         19
caps lock           20
escape              27
page up             33
page down           34
end                 35
home                36
left arrow          37
up arrow            38
right arrow         39
down arrow          40
insert              45
delete              46
0                   48
1                   49
2                   50
3                   51
4                   52
5                   53
6                   54
7                   55
8                   56
9                   57
a                   65
b                   66
c                   67
d                   68
e                   69
f                   70
g                   71
h                   72
i                   73
j                   74
k                   75
l                   76
m                   77
n                   78
o                   79
p                   80
q                   81
r                   82
s                   83
t                   84
u                   85
v                   86
w                   87
x                   88
y                   89
z                   90
left window key     91
right window key    92
select key          93
numpad 0            96
numpad 1            97
numpad 2            98
numpad 3            99
numpad 4            100
numpad 5            101
numpad 6            102
numpad 7            103
numpad 8            104
numpad 9            105
multiply            106
add                 107
subtract            109
decimal point       110
divide              111
f1                  112
f2                  113
f3                  114
f4                  115
f5                  116
f6                  117
f7                  118
f8                  119
f9                  120
f10                 121
f11                 122
f12                 123
num lock            144
scroll lock         145
semi-colon          186
equal sign          187
comma               188
dash                189
period              190
forward slash       191
grave accent        192
open bracket        219
back slash          220
close braket        221
single quote        222

并非所有浏览器都能很好地处理keypress事件,因此请使用key up或key down事件,如下所示:

$(document).keydown(function (e) {
    if (e.keyCode == 16) {
        alert(e.which + " or Shift was pressed");
    }
});

加上1的努力金额
伊恩·怀斯

使用event.key,而不是!它会直接给您字符,例如:“ a”,“ 1”,“ LeftArrow”
Gibolt

更好的VanillaJS版本:document.addEventListener("keydown", function(e){ console.log(e.which); });
Evgeny

26

对于鼠标事件,我知道在Firefox中,至少事件对象上的“ shiftKey”属性会告诉您Shift键是否按下。它已在MSDN上进行了记录,但我还没有永远尝试过,因此我不记得IE是否正确执行了此操作。

因此,您应该能够在“单击”处理程序中检查事件对象上的“ shiftKey”。


2
确实。这种情况可以追溯到JavaScript的早期。
bobince 2010年

23

我遇到了类似的问题,试图捕获“ shift + click”,但是由于我使用的是带有回调的第三方控件而不是标准click处理程序,因此我无法访问事件对象及其关联对象e.shiftKey

我最终处理了mouse down事件以记录偏移度,然后稍后在回调中使用它。

    var shiftHeld = false;
    $('#control').on('mousedown', function (e) { shiftHeld = e.shiftKey });

以防万一其他人最终在这里寻找解决此问题的方法。



6

我使用一种方法通过将当前按下的键代码存储在数组中来测试是否按下了任何特定的键:

var keysPressed = [],
    shiftCode = 16;

$(document).on("keyup keydown", function(e) {
    switch(e.type) {
        case "keydown" :
            keysPressed.push(e.keyCode);
            break;
        case "keyup" :
            var idx = keysPressed.indexOf(e.keyCode);
            if (idx >= 0)
                keysPressed.splice(idx, 1);
            break;
    }
});

$("a.shifty").on("click", function(e) {
    e.preventDefault();
    console.log("Shift Pressed: " + (isKeyPressed(shiftCode) ? "true" : "false"));
});

function isKeyPressed(code) {
    return keysPressed.indexOf(code) >= 0;
}

这是jsfiddle


3
很酷的解决方案,但是它需要对keyup进行较小的修复:while(idx> = 0){keysPressed.splice(idx,1); idx = avpg.keysPressed.indexOf(e.keyCode); 否则,将仅删除第一次出现的按键。要注意这一点,请按住Shift键几秒钟。数组中填充了移位代码,但在键入时仅除去其中之一。
pkExec

4

优秀的JavaScript库 KeyboardJS处理所有类型的按键,包括SHIFT键。它甚至允许指定组合键,例如先按CTRL + x,再按a。

KeyboardJS.on('shift', function() { ...handleDown... }, function() { ...handleUp... });

如果您想要一个简单的版本,请通过@tonycoupland回答

var shiftHeld = false;
$('#control').on('mousedown', function (e) { shiftHeld = e.shiftKey });

@downvoters:请留下您为什么投票的评论
koppor

3

这对我很有用:

function listenForShiftKey(e){
    var evt = e || window.event;
    if (evt.shiftKey) {
      shiftKeyDown = true;
    } else {
      shiftKeyDown = false;
    }
}


2

更具模块化的方法以及将this范围保持在侦听器中的能力:

var checkShift = function(fn, self) {
  return function(event) {
    if (event.shiftKey) {
      fn.call(self, event);
    }
    return true;
  };
};

$(document).on('keydown', checkShift(this.enterMode, this));

1

如果有人想要检测给定的键并需要知道“修饰符”(在Java中称为“修饰符”)的状态,例如Shift,Alt和Control键,则可以执行类似的操作,以keydown对键F9 做出响应,但前提是当前未按下Shift,Alt或Control键。

jqMyDiv.on( 'keydown', function( e ){
    if( ! e.shiftKey && ! e.altKey && ! e.ctrlKey ){
        console.log( e );
        if( e.originalEvent.code === 'F9' ){
          // do something 
        }
    }
});

0
var shiftDown = false;
this.onkeydown = function(evt){
    var evt2 = evt || window.event;
    var keyCode = evt2.keyCode || evt2.which;       
    if(keyCode==16)shiftDown = true;
}
this.onkeyup = function(){
    shiftDown = false;
}

演示

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.