Rumah hujung hadapan web tutorial js jquery键盘事件使用介绍_jquery

jquery键盘事件使用介绍_jquery

May 16, 2016 pm 06:00 PM
Acara papan kekunci

一、首先需要知道的是:
1、keydown()
keydown事件会在键盘按下时触发.
2、keyup()
keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件
3、keypress()
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键
二、获得键盘上对应的ascII码:

复制代码 代码如下:

$(document).keydown(function(event){
console.log(event.keyCode);
});

$tips: 上面例子中,event.keyCode就可以帮助我们获取到我们按下了键盘上的什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39;
三、实例(当按下键盘上的左右方面键时)
复制代码 代码如下:

$(document).keydown(function(event){
//判断当event.keyCode 为37时(即左方面键),执行函数to_left();
//判断当event.keyCode 为39时(即右方面键),执行函数to_right();
if(event.keyCode == 37){
//do somethings;
}else if (event.keyCode == 39){
//do somethings;
}
});

实例研究:
比如:小说网站中常见的按左右键来实现上一篇文章和下一篇文章;按ctrl+回车实现表单提交;google reader和有道阅读中的全快捷键操作...(以此提高用户体验)
如果我们要实现ctrl+Enter就是ctrl+回车提交表单,可以这样:
复制代码 代码如下:

$(document).keypress(function(e) {
if (e.ctrlKey && e.which == 13)
$("form").submit();
})
//键盘操作
$(document).keydown(function(event){
var e = event || window.event;
var k = e.keyCode || e.which;
switch(k) {
case 37:
//…
break;
case 39:
//…
break;
}
return false;
})

更详尽的关于事件的总结和表述:http://www.jb51.net/article/28772.htm

w3school上的jQuery 事件参考手册

学习过程中,应该多思考怎样改善交互性和用户体验。
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Belajar menggunakan arahan v-on Vue untuk mengendalikan acara pintasan papan kekunci Belajar menggunakan arahan v-on Vue untuk mengendalikan acara pintasan papan kekunci Sep 15, 2023 am 11:01 AM

Belajar menggunakan arahan v-on Vue untuk mengendalikan acara pintasan papan kekunci Dalam Vue, kita boleh menggunakan perintah v-on untuk mendengar acara elemen, termasuk acara tetikus, acara papan kekunci, dsb. Artikel ini akan memperkenalkan cara menggunakan arahan v-on untuk mengendalikan acara pintasan papan kekunci dan memberikan contoh kod khusus. Mula-mula, anda perlu menentukan kaedah dalam contoh Vue untuk mengendalikan peristiwa utama pintasan. Sebagai contoh, kita boleh menambah kaedah bernama handleShortcut kepada kaedah: kaedah:{

Tutorial asas untuk pembelajaran Pygame: Pengenalan pantas kepada pembangunan permainan Tutorial asas untuk pembelajaran Pygame: Pengenalan pantas kepada pembangunan permainan Feb 19, 2024 am 08:51 AM

Tutorial pemasangan Pygame: Kuasai dengan cepat asas pembangunan permainan, contoh kod khusus diperlukan Pengenalan: Dalam bidang pembangunan permainan, Pygame ialah perpustakaan Python yang sangat popular. Ia menyediakan pembangun dengan ciri yang kaya dan antara muka yang mudah digunakan, membolehkan mereka membangunkan permainan berkualiti tinggi dengan cepat. Artikel ini akan memperkenalkan anda secara terperinci cara memasang Pygame dan menyediakan beberapa contoh kod khusus untuk membantu anda menguasai asas pembangunan permainan dengan cepat. 1. Pemasangan Pygame Pasang Python dan mula pasang Pyga

Jenis Acara dalam JavaScript: Papan Kekunci Biasa dan Acara Tetikus Jenis Acara dalam JavaScript: Papan Kekunci Biasa dan Acara Tetikus Sep 03, 2023 am 09:33 AM

JavaScript menyediakan pelbagai acara yang membolehkan anda berinteraksi dan bertindak balas terhadap tindakan pengguna pada halaman web. Antara acara ini, acara papan kekunci dan tetikus adalah yang paling biasa digunakan. Dalam artikel ini, kita akan melihat pelbagai jenis acara papan kekunci dan tetikus dalam JavaScript dan melihat contoh cara menggunakannya. Peristiwa papan kekunci Peristiwa papan kekunci berlaku apabila pengguna berinteraksi dengan papan kekunci, seperti menekan kekunci, melepaskan kekunci atau menaip aksara. Acara papan kekunci membolehkan kami melakukan beberapa perkara yang menarik, seperti menyemak sama ada pengguna memasukkan sesuatu dengan betul ke dalam borang atau sesuatu berlaku apabila kekunci tertentu ditekan. Seolah-olah laman web itu mendengar kekunci yang anda tekan dan bertindak balas dengan sewajarnya. Acara papan kekunci dibahagikan kepada tiga jenis: acara kekunci

Panduan Pemasangan Pygame: Tutorial pengenalan yang mudah difahami Panduan Pemasangan Pygame: Tutorial pengenalan yang mudah difahami Feb 20, 2024 pm 12:39 PM

Tutorial Pemasangan Pygame: Panduan permulaan yang ringkas dan mudah difahami, memerlukan contoh kod khusus Pengenalan: Pygame ialah perpustakaan Python yang sangat popular untuk membangunkan permainan 2D. Ia menyediakan fungsi yang kaya dan antara muka yang mudah digunakan, menjadikan pembangunan permainan lebih mudah dan lebih menarik. Artikel ini akan memperkenalkan anda kepada proses pemasangan Pygame dan memberikan contoh kod khusus untuk membantu pemula bermula dengan cepat. 1. Pasang Python dan Pygame Muat turun Python dan Pygame: Mula-mula anda perlu memasang Python.

Cara menggunakan Golang untuk mencipta rangka kerja pembangunan permainan yang cekap Cara menggunakan Golang untuk mencipta rangka kerja pembangunan permainan yang cekap Mar 06, 2024 pm 06:15 PM

Sebagai bahasa pengaturcaraan yang popular dan cekap dalam industri, Golang juga digunakan secara meluas dalam bidang pembangunan permainan. Artikel ini akan memperkenalkan cara menggunakan Golang untuk mencipta rangka kerja pembangunan permainan yang cekap dan memberikan contoh kod khusus. Kami akan mengambil permainan 2D yang mudah sebagai contoh untuk dijelaskan. Bahagian Pertama: Pembinaan Enjin Permainan Pertama, kita perlu membina enjin permainan yang mudah, termasuk gelung permainan, pemaparan grafik dan fungsi lain. Berikut ialah rangka kerja enjin permainan mudah: packageenginei

Java Swing berbanding perpustakaan GUI lain: kelebihan dan kekurangan Java Swing berbanding perpustakaan GUI lain: kelebihan dan kekurangan Mar 28, 2024 pm 04:02 PM

Kelebihan: Keserasian merentas platform: Komponen Swing adalah berdasarkan Mesin Maya Java (JVM) dan boleh dijalankan pada mana-mana platform yang menyokong Java, termasuk Windows, MacOS dan Linux. Keserasian merentas platform ini menjadikannya ideal untuk membangunkan aplikasi merentas platform. Set komponen kaya: Swing menyediakan pelbagai jenis komponen, termasuk butang, medan teks, senarai dan jadual. Komponen ini sangat boleh disesuaikan, membolehkan pembangun mencipta antara muka pengguna yang kompleks. Pengurus susun atur yang berkuasa: Swing menyediakan beberapa pengurus susun atur seperti BorderLayout, FlowLayout dan GridBagLayout. Pengurus susun atur ini membantu menyusun dan menyusun komponen untuk memudahkan penggunaan

Tutorial pemasangan Pygame: Membolehkan anda memulakan dengan cepat dengan pengaturcaraan permainan Tutorial pemasangan Pygame: Membolehkan anda memulakan dengan cepat dengan pengaturcaraan permainan Feb 20, 2024 am 09:17 AM

Tutorial pemasangan Pygame: Biarkan anda bermula dengan cepat dengan pengaturcaraan permainan Pengenalan: Pygame ialah perpustakaan pembangunan permainan berdasarkan bahasa pengaturcaraan Python Ia menyediakan siri fungsi dan alatan yang kaya untuk membantu pembangun mencipta dan mereka permainan 2D dengan cepat. Artikel ini akan memperkenalkan cara memasang Pygame dan memberikan contoh kod khusus untuk membantu pemula dengan cepat memulakan pengaturcaraan permainan. 1. Pasang Pygame: Pastikan persekitaran Python telah dipasang: Pertama, pasang penterjemah Python pada komputer anda dan pastikan

Aplikasi praktikal acara menggelegak dan jenis acara yang berkenaan Aplikasi praktikal acara menggelegak dan jenis acara yang berkenaan Feb 18, 2024 pm 04:19 PM

Senario aplikasi acara menggelegak dan jenis peristiwa yang disokongnya Acara menggelegak bermaksud bahawa apabila peristiwa pada elemen dicetuskan, peristiwa itu akan dihantar kepada elemen induk elemen tersebut, dan kemudian kepada elemen moyang elemen tersebut sehingga ia. dihantar ke nod akar dokumen. Ia merupakan mekanisme penting model acara dan mempunyai pelbagai senario aplikasi. Artikel ini akan memperkenalkan senario aplikasi acara menggelegak dan meneroka jenis acara yang disokongnya. 1. Senario aplikasi Acara menggelegak mempunyai pelbagai senario aplikasi dalam pembangunan web Berikut ialah beberapa senario aplikasi biasa. pengesahan borang dalam borang

See all articles