jquery鍵盤事件總結

在工作中在發現同事在寫輸入密碼按鍵的相關js效果時，發現自己對於這塊很是不了解，這幾天特地了解了一下，進行以下總結:

一、首先要知道鍵盤事件的幾個屬性:

1、keydown()：在鍵盤按下時觸發。

2、keyup()：是按下鍵盤起來后的事件。

3、keypress()：在敲擊按鍵時觸發，我們可以理解為按下並抬起同一個按鍵。

二、獲得鍵盤上對應的 ascII 碼：

//鍵碼獲取
$(document).keydown(function (event) {
    alert(event.keyCode);
});

上面例子中，event.keyCode 可以幫助我們獲取到我們按下了鍵盤上的什么按鍵,它返回的就是 ascII 碼,比如說上下左右鍵,分別是38,40,37,39；

三、案例1：

比如：小說網站中常見的按左右鍵來實現上一篇文章和下一篇文章；
按 ctrl+enter 實現表單提交（以此提高用戶體驗）；
如果我們要實現 ctrl+enter 提交表單，可以這樣：

//鍵盤操作
$(document).keydown(function (event) {
    if (event.ctrlKey && event.keyCode == 13) {
        alert('Ctrl+Enter');
    };
    switch (event.keyCode) {
    case 37:
        alert('方向鍵-左');
        break;
    case 39:
        alert('方向鍵-右');
        break;
    };
    return false;
});

四、案例2：

1、html結構：4個input框

<div class="setpsw input">
    <input type="password">
    <input type="password">
    <input type="password">
    <input type="password">
    <input type="password">
    <input type="password">
</div>

2、css結構

.setpsw {
    margin: 0 auto;
    height: 50px;
    overflow: hidden;
    display: inline-block;
}
.setpsw input {
    width: 30px;
    height: 30px;
    padding: 0 0;
    float: left;
    margin: 5px;
    text-align: center; 
    line-height: 21px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    outline: 0;
    background-color: #fff;
}

3、js效果

$(".input input").keyup(function(event){
　　var  e = (event) ? event : window.event;
　　if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)){
　　　　var value = $(this).val();
　　　　var length = value.length;
　　　　var val;
　　　　if(length>0.5){
　　　　　　val = value.substring(length-1,length);
　　　　　　$(this).val(val).next().focus()
　　　　}
　　}else if(e.keyCode == 8){
　　　　$(this).prev().focus()
　　} else {
　　　　 var _val = this.value;
　　　　 this.value = _val.replace(/\D/g,'');
　　}
});

效果圖

 

勿忘初心，奮力前行