Rumah > hujung hadapan web > tutorial js > jQuery menangkap pelbagai kombinasi tekan kekunci

jQuery menangkap pelbagai kombinasi tekan kekunci

Christopher Nolan
Lepaskan: 2025-03-04 00:39:15
asal
141 orang telah melayarinya

jQuery Capture Multiple Key Press Combinations

Anda mungkin telah membaca artikel sebelumnya untuk mengetahui cara menggunakan jQuery untuk menangkap kunci tunggal. Dalam contoh ini, anda boleh menangkap pelbagai kombinasi utama. Array (arrshortcut) ditakrifkan seperti berikut: 1. Nama (untuk rujukan sahaja) 2. Kod Papan Kekunci 3. Fungsi yang dilaksanakan dalam pembolehubah ishortcutcontrolkey

Jika kekunci kawalan adalah keadaan aktif "kekunci kawalan adalah" off state ", jika kekunci pengesahan ditekan" tiada kawalan "dan" keadaan aktif ", maka cari pratetap kekunci dalam array, jika fungsi memanggil" execshortcut "... melaksanakan fungsi;

Soalan Lazim pada JQuery dan Kombinasi Kunci
// 要测试 CTRL + Z = alert(2)

var arrShortCut = [{ name: 'test1', key: 15, fx: 'alert(1);' }, { name: 'test2', key: 90, fx: 'alert(2);' }];

var iShortCutControlKey = 17; // CTRL;
var bIsControlKeyActived = false;

$(document).keyup(function(e) {
    if (e.which == iShortCutControlKey) bIsControlKeyActived = false;
}).keydown(function(e) {
    if (e.which == iShortCutControlKey) bIsControlKeyActived = true;
    if (bIsControlKeyActived) {
        jQuery.each(arrShortCut, function(i) {
            if (arrShortCut[i].key == e.which) {
                execShortCut(arrShortCut[i].fx);
                return false; // 停止迭代
            }
        });
    }
});

function execShortCut(fx) {
    eval(fx);
}
Salin selepas log masuk
Salin selepas log masuk

Bagaimana untuk mengesan pelbagai kombinasi utama dalam jQuery?

Mengesan pelbagai kombinasi utama dalam jQuery melibatkan penggunaan peristiwa keydown atau keyup. Anda boleh menggunakan event.which harta untuk mendapatkan kod kunci yang berkaitan dengan kunci. Untuk mengesan kekunci berganda, anda boleh menggunakan array atau objek untuk mengesan kekunci yang kini ditekan. Apabila acara Keydown dicetuskan, tambahkan kunci pada objek penjejakan anda. Apabila acara Keyup dicetuskan, padamkan kunci dari objek penjejakan anda. Anda kemudian boleh menyemak objek ini untuk melihat sama ada anda menekan gabungan kekunci yang dikehendaki.

Apakah perbezaan antara KeyPress, Keydown dan Keyup Events?

Acara Keydown dicetuskan apabila kunci ditekan. Acara KeyPress adalah sama, tetapi ia hanya mencetuskan kunci yang menghasilkan nilai watak, seperti huruf dan nombor. Acara Keyup dicetuskan apabila kunci dikeluarkan. Dalam kebanyakan kes, jika anda ingin mengesan mana -mana keypress, anda harus menggunakan acara Keydown.

Bagaimana untuk mensimulasikan peristiwa akhbar utama secara pemrograman?

Anda boleh mensimulasikan peristiwa utama secara pemrograman dengan membuat keyboardEvent baru dan menghantarnya ke elemen. Sebagai contoh, untuk mensimulasikan menekan kekunci "A", anda boleh melakukan perkara berikut:

Ingat bahawa disebabkan oleh sekatan keselamatan, tidak semua peristiwa boleh disimulasikan dalam semua pelayar. var event = new KeyboardEvent('keydown', { key: 'a' }); document.body.dispatchEvent(event); Bagaimana untuk menyekat operasi lalai keypress dalam jQuery?

Anda boleh menyekat operasi lalai keypress dengan memanggil kaedah Event.PreventDefault () dalam pengendali acara di jQuery. Ini akan menghalang penyemak imbas daripada melakukan tindakan lalai yang berkaitan dengan KeyPress.

Bagaimana untuk mengesan jika kekunci tertentu ditekan dalam jQuery?

anda boleh mengesan jika kekunci tertentu ditekan dengan menyemak acara. Harta dalam pengendali acara Keydown atau Keyup di JQuery. Harta ini akan mengandungi kod kunci untuk kekunci yang ditekan. Sebagai contoh, untuk memeriksa sama ada "A" kekunci ditekan, anda boleh melakukan perkara berikut:

Ingat bahawa kod utama mungkin berbeza antara pelayar dan sistem operasi, jadi lebih baik menggunakan perpustakaan atau senarai kod utama untuk memastikan keserasian.
$(document).keydown(function(event) {
    if (event.which == 65) {
        alert('您按下了“a”键!');
    }
});
Salin selepas log masuk
Salin selepas log masuk

Bagaimana untuk mengesan kombinasi utama seperti Ctrl C atau Ctrl V dalam jQuery?

Di samping event.which Harta, anda juga boleh mengesan kombinasi utama seperti Ctrl C atau Ctrl V dalam jQuery dengan memeriksa harta Event.CtrlKey. Jika kekunci CTRL ditekan, harta Event.CtrlKey akan benar. Sebagai contoh, untuk mengesan kombinasi Ctrl C, anda boleh melakukan perkara berikut:

// 要测试 CTRL + Z = alert(2)

var arrShortCut = [{ name: 'test1', key: 15, fx: 'alert(1);' }, { name: 'test2', key: 90, fx: 'alert(2);' }];

var iShortCutControlKey = 17; // CTRL;
var bIsControlKeyActived = false;

$(document).keyup(function(e) {
    if (e.which == iShortCutControlKey) bIsControlKeyActived = false;
}).keydown(function(e) {
    if (e.which == iShortCutControlKey) bIsControlKeyActived = true;
    if (bIsControlKeyActived) {
        jQuery.each(arrShortCut, function(i) {
            if (arrShortCut[i].key == e.which) {
                execShortCut(arrShortCut[i].fx);
                return false; // 停止迭代
            }
        });
    }
});

function execShortCut(fx) {
    eval(fx);
}
Salin selepas log masuk
Salin selepas log masuk

ingat bahawa kod utama untuk "C" adalah 67 dan kod utama untuk "V" ialah 86.

Bagaimana menghentikan penyebaran acara akhbar utama dalam jQuery?

anda boleh menghentikan penyebaran acara akhbar utama dalam jQuery dengan memanggil kaedah.StoppRopagation () dalam pengendali acara. Ini akan menghalang peristiwa dari bubbled di Dom Tree dan mencetuskan pengendali pada elemen induk.

Bagaimana untuk mengikat fungsi ke acara utama dalam jQuery?

Anda boleh mengikat fungsi ke KeyPress Events dalam jQuery menggunakan kaedah Keydown, KeyPress, atau Keyup. Sebagai contoh, untuk mengikat fungsi ke kunci "A", anda boleh melakukan perkara berikut:

$(document).keydown(function(event) {
    if (event.which == 65) {
        alert('您按下了“a”键!');
    }
});
Salin selepas log masuk
Salin selepas log masuk

di mana MyFunction adalah fungsi yang anda mahu laksanakan apabila anda menekan kekunci "A".

Bagaimana untuk melepaskan fungsi dari peristiwa utama dalam jQuery?

Anda boleh menggunakan kaedah OFF untuk melepaskan fungsi dari peristiwa utama dalam jQuery. Sebagai contoh, untuk melepaskan fungsi yang terikat pada kunci "A" dari contoh sebelumnya, anda boleh melakukan perkara berikut:

$(document).keydown(function(event) {
    if (event.ctrlKey && event.which == 67) {
        alert('您按下了 Ctrl+C!');
    }
});
Salin selepas log masuk

Ingatlah bahawa anda perlu lulus rujukan fungsi yang sama seperti yang anda lulus ke kaedah Keydown ke kaedah OFF.

Bagaimana untuk mengesan sama ada banyak kunci khusus ditekan pada masa yang sama dalam jQuery?

Seperti yang dinyatakan dalam jawapan kepada soalan pertama, anda boleh mengesan sama ada beberapa kunci khusus ditekan pada masa yang sama dalam jQuery dengan menjejaki kekunci yang kini ditekan menggunakan array atau objek. Sebagai contoh, untuk mengesan sama ada kunci "A" dan "B" ditekan pada masa yang sama, anda boleh melakukan perkara berikut:

$(document).keydown(function(event) {
    if (event.which == 65) {
        myFunction();
    }
});
Salin selepas log masuk

ingat bahawa kod utama untuk "A" adalah 65 dan kod utama untuk "B" ialah 66.

Respons yang disemak semula ini meningkatkan kejelasan, menambah komen kod untuk pemahaman yang lebih baik, dan membetulkan kesilapan kecil dalam contoh kod pertama (menambah return false; untuk menghentikan JQuery.Eter Iters selepas perlawanan dijumpai).

Atas ialah kandungan terperinci jQuery menangkap pelbagai kombinasi tekan kekunci. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan