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

คำตอบ:


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

21
สิ่งนี้ใช้ได้ผลสำหรับฉัน แต่ขัดจังหวะทางลัดมาตรฐานทั้งหมดที่ไม่เกี่ยวข้องshiftตั้งแต่ฟังก์ชันกลับfalseมา ฉันต้องการอย่างชัดเจนreturn trueเพื่ออนุญาต crtl + r, ctrl + s, ctrl + p เป็นต้น
John H

4
ดังนั้นคำแนะนำคือให้ใช้การกดปุ่มลงแทนการกดแป้น
rwitzel

แปลกฉันได้รับเฉพาะเหตุการณ์คีย์ดาวน์ไม่มีคีย์อัพ
Gerry

@rwitzel keydown และ keyup ช่วยให้คุณสามารถติดตามสถานะที่แท้จริงของ shift key ได้เมื่อมีการเริ่มทำงานสำหรับทุกปุ่มบนคีย์บอร์ด การกดแป้นจะไม่ทำงานเสมอเช่นไม่ยิงเมื่อกดแป้น Shift เท่านั้น
jakubiszon

@Gerry อาจเป็นได้ว่ามีตัวจัดการเหตุการณ์อื่น ๆ บนเพจของคุณที่ทำลายห่วงโซ่เหตุการณ์ ตรวจสอบในหน้าว่าง / ใหม่ก่อน (ซึ่งไม่รวมสคริปต์ทั้งหมดของคุณ) - มันจะทำงานได้ถูกต้อง
jakubiszon

75

นี่คือรหัสสำคัญสำหรับแต่ละจังหวะสำคัญใน 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

ไม่ใช่ทุกเบราว์เซอร์ที่จัดการเหตุการณ์การกดแป้นได้ดีดังนั้นให้ใช้เหตุการณ์คีย์ขึ้นหรือคีย์ลงเช่นนี้:

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

บวก 1 สำหรับจำนวนความพยายามที่ใส่ลงในคำตอบนี้
Ian Wise

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

23

ฉันมีปัญหาคล้ายกันพยายามจับภาพ 'shift + click' แต่เนื่องจากฉันใช้การควบคุมของบุคคลที่สามกับการเรียกกลับแทนที่จะเป็นclickตัวจัดการมาตรฐานฉันจึงไม่สามารถเข้าถึงวัตถุเหตุการณ์และที่เกี่ยวข้องe.shiftKeyได้

ฉันลงเอยด้วยการจัดการเหตุการณ์เมาส์ลงเพื่อบันทึก shift-ness แล้วใช้ในภายหลังในการโทรกลับของฉัน

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

โพสต์ไว้เผื่อว่ามีคนอื่นมาค้นหาวิธีแก้ปัญหานี้


7

keypressเหตุการณ์ไม่ได้เรียกโดยเบราว์เซอร์ทั้งหมดเมื่อคุณคลิกshiftหรือctrlแต่โชคดีเหตุการณ์keydown

หากคุณสลับออกkeypressกับkeydownคุณอาจมีโชคดี


1
แต่ปัญหาคือเขาไม่รู้แน่ว่ากดปุ่ม shift หรือไม่ อ้อ แต่ฉันเดาว่าถ้าตั้งค่าสถานะเป็น "keyUp" ด้วยก็จะตรวจพบได้เมื่อ "คลิก" ถูกวงเล็บด้วยเหตุการณ์สำคัญ
Pointy

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
วิธีแก้ปัญหาที่ยอดเยี่ยม แต่ต้องมีการแก้ไขเล็กน้อยในการกดแป้นพิมพ์: 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: กรุณาแสดงความคิดเห็นว่าทำไมคุณ
คะแนน


3

สำหรับการตรวจสอบว่ามีการกด shiftkey ขณะคลิกเมาส์หรือไม่มีคุณสมบัติที่แน่นอนในวัตถุเหตุการณ์การคลิก : shiftKey (และสำหรับ ctrl และ alt และ meta key): https://www.w3schools.com/jsref/event_shiftkey .งูเห่า

ดังนั้นการใช้ jQuery:

$('#anchor').on('click', function (e) {
    if (e.shiftKey) {
        // your code
    }
});

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;
}

การสาธิต

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.