jQuery事件之键盘事件(ctrl Enter回车键提交表单等)_jquery

键盘事件处理所有用户在键盘敲击的情况，不管在文本输入区域内部还是外部。键盘事件在不同的浏览器中作用的范围是不一样的，通常这种键盘事件可以作用于 Form元素，a标签元素，window ，document这样的元素上。在所有可以获得交点的元素上是可以触发键盘事件的，可以获得焦点的元素可以这样理解，在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下，当tabindex设置为负数的时候，在使用Tab键的时候就不会获得焦点)。

    键盘事件可以传递一个参数event，其实所有的jQuery事件都可以传递这么一个参数，这个event是一个对象，其包括一些属性，在触发事件的时候可以通过event来获得一些关于事件的值，比如在使用键盘的时候可以使用event.keyCode来获得所按下键的ASCII码的值。见下文

1：keydown()事件是键盘点击时触发的第一个键盘事件，如果用户继续按住键位，keydown事件会持续进行。

复制代码 代码如下:

      $('input').keydown(function(event){
        alert(event.keyCode);
        });

      通过键盘返回的值可以实现更多的关于这些元素的控制，比如说上下左右键，分别是：38,40,37,39 。
2：keypress()事件和keydown是差不多的，只有一个例外，如果需要阻止按键的默认行为，你必须是哟就keypress事件。

3：keyup()事件是最后一个发生的事件(在keydown事件之后)，不想keydown事件，该事件在松开键盘是仅触发一次(因为松开键盘并不是一个持续的状态)。

复制代码 代码如下:

      $('input').keyup(funciton(){
          alert('keyup function is running!!');
        });

4：在jQuery中keydown，keypress，keyup事件是按一定的顺序执行的。

复制代码 代码如下:

        $('input').keyup(function(){
          console.log('keyup');
          });
        $('input').keydown(function(){
          console.log('keydown');
          });
        $('input').keypress(function(){
          console.log('keypress');
          });

      执行结果是：keydown ,keypress ,keyup .
      在这里不使用alert是因为在alert的时候会阻止一些事件的发生，在这里是会阻止keyup事件的发生，要想实验这端代码，可以在Firefox下进行，需要在浏览器上装上firebug这个插件。放心安装，因为Firefox是一款开源的浏览器。相信开源软件。

jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是:

复制代码 代码如下:

keydown();
keyup();
keypress();

keydown()

keydown事件會在鍵盤按下時觸發,可以在綁定的函數中歐能夠返回false來防止觸發瀏覽器的預設事件.

keyup()

keyup事件會在按鍵釋放時觸發,也就是你按下鍵盤起來後的事件

keypress()

keypress事件會在敲擊按鍵時觸發,我們可以理解為按下並抬起同一個按鍵

 我們要怎麼取得我按下的是A還是Z還是回車按鈕呢?

鍵盤事件可以傳遞一個參數event,其實說有的jQuery事件函數中都可以傳遞這麼一個參數

複製程式碼 程式碼如下:

$('input').keydown(function(event ){
alert(event.keyCode);
});

上面程式碼中的,event.keyCode就可以幫助我們取得到我們按下了什麼按鍵,他回傳的是ascII碼,比如說上下左右鍵,分別是38,40,37,39

如果我們要實作ctrl Enter就是ctrl 回車提交表單

複製程式碼 程式碼如下:

$(document).keypress(function(e) {function(e) {function(e) {function(e) {function(e) {function(e) {function(e) {function(e) {function
if (e.ctrlKey && e.which == 13)
$("form").submit();
})

其它參考資訊：

預備知識

1.數字0鍵值48..數字9鍵值57
2.a鍵值97..z鍵值122;A鍵值65..Z鍵值90
3.鍵值43;-鍵值45;.鍵值46;退格8;tab鍵值9;
4.event在ie中是全域的，在firefox是臨時對象，需要傳遞參數

複製程式碼 程式碼如下:

*/
jQuery.extende /*================================================= ============================
功能描述：取得按鍵的值
呼叫方法：
jQuery.getKeyNum (event);
*/
getKeyNum:function(e){
var keynum;
if(window.event){ // IE
keynum = event.keyCode;
}
else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
return keynum;
},
/*==>return keynum;
},
/*== ==================================================== =======================
功能描述：判斷是否為整數，限制編輯框只能輸入數字
呼叫方法：

待解決問題：
firefox下tab鍵不起作用。 (e){
var keynum = this.getKeyNum(e);
if(keynum >= 48 && keynum return true;
}
return false;
},
/*========================== =================================================
功能描述：判斷是否為小數，限制編輯框只能輸入數字，只能輸入一個小數點。 event);" />
*/
isFloat:function(txt,e){
var keynum = this.getKeyNum(e);
if(keynum == 46){//輸入小數點
if(txt.value.length == 0){
return false;
}else if(txt.value.indexOf('.') >= 0){
return false;
}else{
return true;
}
}
if(this.isInt(e)){
return true;
}
return false;
}
});