JQuery atau JavaScript: Bagaimana cara menentukan apakah tombol shift ditekan saat mengklik hyperlink tag anchor?

Saya memiliki tag anchor yang memanggil fungsi JavaScript.

Dengan atau tanpa JQuery, bagaimana cara menentukan apakah tombol shift turun saat tautan diklik?

Kode berikut TIDAK berfungsi karena penekanan tombol hanya diaktifkan jika "kunci sebenarnya" (bukan tombol shift) ditekan. (Saya berharap itu akan menyala jika hanya tombol shift saja yang ditekan.)

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
}

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

Berikut adalah kode kunci untuk setiap penekanan tombol dalam JavaScript. Anda dapat menggunakannya dan mendeteksi jika pengguna telah menekan tombol 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

Tidak semua browser menangani peristiwa penekanan tombol dengan baik, jadi gunakan peristiwa tombol naik atau turun, seperti ini:

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

Untuk acara mouse, saya tahu bahwa di Firefox setidaknya properti "shiftKey" pada objek acara akan memberi tahu Anda jika tombol shift tidak aktif. Ini didokumentasikan di MSDN tetapi saya belum mencobanya selamanya jadi saya tidak ingat apakah IE melakukan ini dengan benar.

Jadi, Anda harus dapat memeriksa "shiftKey" pada objek acara di penangan "klik" Anda.

Saya memiliki masalah serupa, mencoba menangkap 'shift + klik' tetapi karena saya menggunakan kontrol pihak ketiga dengan callback daripada clickpenangan standar , saya tidak memiliki akses ke objek acara dan yang terkait e.shiftKey.

Saya akhirnya menangani acara mouse down untuk merekam shift-ness dan kemudian menggunakannya nanti di callback saya.

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

Diposting untuk berjaga-jaga jika orang lain berakhir di sini mencari solusi untuk masalah ini.

The keypressevent tidak dipicu oleh semua browser saat Anda mengklik shiftatau ctrl, tapi untungnya itu keydownacara ini .

Jika Anda bertukar keypressdengan keydownAnda mungkin lebih beruntung.

Saya telah menggunakan metode untuk menguji apakah ada tombol tertentu yang ditekan dengan menyimpan kode kunci yang saat ini ditekan dalam sebuah array:

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

Ini jsfiddle tersebut

Pustaka JavaScript yang luar biasa KeyboardJS menangani semua jenis penekanan tombol termasuk tombol SHIFT. Bahkan memungkinkan menentukan kombinasi tombol seperti menekan CTRL + x terlebih dahulu lalu a.

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

Jika Anda menginginkan versi sederhana, buka jawaban oleh @tonycoupland ):

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

Ini bagus untuk saya:

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

Untuk memeriksa apakah shiftkey ditekan saat mengklik dengan mouse , ada properti yang tepat di objek event klik : shiftKey (dan juga untuk ctrl dan alt dan meta key): https://www.w3schools.com/jsref/event_shiftkey .asp

Jadi menggunakan jQuery:

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

Pendekatan yang lebih modular ditambah kemampuan untuk mempertahankan thiscakupan Anda di pendengar:

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

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

Jika ada yang ingin mendeteksi kunci yang diberikan dan perlu mengetahui status "pengubah" (sebagaimana mereka disebut di Java), yaitu tombol Shift, Alt dan Kontrol, Anda dapat melakukan sesuatu seperti ini, yang merespons keydownpada tombol F9, tetapi hanya jika tidak ada tombol Shift, Alt atau Control yang saat ini ditekan.

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

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

demo