jQuery监听键盘事件及相关操作使用教程

来源:博客园 分类: 文章浏览史 发布时间:2021-10-20 11:46:05 最后更新:2021-10-20 浏览:168
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-10-20 11:46:05

一、首先需要知道的是:


  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;

});

 

php技术微信