在开发网页时,经常会需要响应键盘操作事件来实现交互效果。而JQuery支持非常丰富的键盘查询事件,以下为常用的键盘事件:
//键盘按下事件$(document).keydown(function(event){console.log(event.keyCode);});//键盘释放事件$(document).keyup(function(event){console.log(event.keyCode);});//键盘持续按下事件var pressTimer;$(document).on(mousedown, function(event) {pressTimer = window.setTimeout(function() {console.log(持续按下);},800);}).on(mouseup, function(event) {window.clearTimeout(pressTimer);});//键盘Ctrl、Alt、Shift组合键var ctrlDown = false;$(document).on(keydown, function(event) {if (event.which === 17) { //CtrlctrlDown = true;} else if (event.which === 83 && ctrlDown) { //Ctrl+Sevent.preventDefault();console.log(Ctrl+S pressed);}}).on(keyup, function(event){if (event.which === 17) {ctrlDown = false;}});//只响应数字输入$(document).on(keydown, function(event) {if (event.keyCode< 48 || event.keyCode >57) {event.preventDefault();}});
以上为常用的键盘事件,通过JQuery的键盘查询事件,可以轻松实现多样化的Web交互效果。