jQuery監聽鍵盤事件及相關操作使用教程


一、首先需要知道的是:


  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;

});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM