KeyPress 和KeyDown 、KeUp之間的區別

来源:https://www.cnblogs.com/donghuang/archive/2018/08/13/9449912.html
-Advertisement-
Play Games

keyup適用於文本框的數據輸入和同步，以及數據的獲取；keydown 與 keypress更適用於通過鍵盤控制頁面功能的實現(如回車事件) ...


　　前幾天，在寫完一個功能模塊上線測試的時候，出現了一個詭異的問題。input 框在輸入查詢內容之後，按回車鍵居然有兩種不同的表現形式（input 框沒有綁定鍵盤事件），谷歌和火狐功能正常，但IE在按了回車鍵以後居然自動調用方法。

頁面結構：標簽上沒綁定任何鍵盤事件，控制器內也沒有給元素綁定鍵盤事件。

<div class="search-input-tel search-input-visit-tel" >
    <input class="searchinput-tel searchinput-visit-tel" type="text" ng-model="private.keyWords" maxlength="20" placeholder="請輸入查詢信息!"/>
</div>

表現形式：

，谷歌和火狐很正常，什麼事都沒發生

，IE上卻自動調用了一個方法，而且始終調用的同一個方法。

　　搞得有點蒙圈，不曉得是咋回事。既然 input框 要調用鍵盤事件，那就調用吧，大不了我在標簽上面綁定定義好的鍵盤事件方法：

<div class="search-input-tel search-input-visit-tel" >
    <input class="searchinput-tel searchinput-visit-tel" type="text" ng-model="private.keyWords" maxlength="20" placeholder="請輸入查詢信息!"
           ng-keypress="enterQuery($event,'query',1)" ng-change="changesData(private.keyWords)"/>
</div>

　　鍵盤迴車事件方法：

//回車鍵功能
$scope.enterQuery = function (event,type,repetitionType) {
    var key =  window.event ? window.event.keyCode : event.which;       //獲取鍵盤碼；window.event.keyCode 獲取IE下的鍵盤碼，event.which獲取非IE下的鍵盤碼
    if (key === 13) {       //回車鍵鍵盤碼為13
        try {
            if (window.event) { //ie
                $scope.clientsHeavy(type,repetitionType);
                window.event.returnValue = false;
            } else {    //非IE
                $scope.clientsHeavy(type,repetitionType);
                return false;
            }
        }
        catch (ex) {
        }
    }
};

　　這下解決了 input框 回車自動調用方法的問題。

　　現在返回來看他們之間的區別，在此我用了 keypress 事件，而沒有用 keyup 事件，因為keyup事件在IE上和谷歌上表現形式又不一樣。同樣是執行 console.log("鍵盤碼:key="+ key);

　　谷歌瀏覽器：keypress 事件和 keydown 事件，以及 keyup 事件，三者執行結果一樣，控制台都會列印：　　 鍵盤碼:key=13

　　IE瀏覽器：keypress 事件和 keydown事件，控制台也都會列印：鍵盤碼:key=13 ；但是到了 keyup事件，控制台則不列印：鍵盤碼:key=13，這表示keyup事件並沒有執行我們自定義的方法，反而又出現了自動調用方法的情況。所以自己在這總結下，他們仨之間的區別，加深印象。

 

/****下麵抄一段對鍵盤事件和鍵盤碼 (ASCII碼)，以及KeyPress 和KeyDown 、KeUp事件的描述****/　　　

Windows窗體通過引發鍵盤事件來處理鍵盤輸入以響應Windows消息，大多數Windows窗體應用程式都通過處理鍵盤事件來以獨占方式處理鍵盤輸入。

1．按鍵的類型

　　Windows窗體將鍵盤輸入標識為 由按位Keys枚舉 表示的虛擬鍵代碼。使用Keys枚舉，可以綜合一系列按鍵以生成單個值，這些值與WM_KEYDOWN和WM_SYSKEYDOWNWindows消息所伴隨的值相對應。另外，程式開發人員可通過處理KeyDown或KeyUp 事件來檢測大多數物理按鍵操作。字元鍵是Keys枚舉的子集，它們與WM_CHAR和WM_SYSCHAR Windows消息所伴隨的值相對應，如果通過組合按鍵得到一個字元，則可以通過處理KeyPress事件來檢測該字元。

事件定義：

  1. KeyDown：在控制項有焦點的情況下按下鍵時發生。
  2. KeyPress：在控制項有焦點的情況下按下鍵時發生。(下麵會說和KeyDown 的區別)
  3. KeyUp：在控制項有焦點的情況下釋放鍵時發生。

2．鍵盤事件的順序

　　一個控制項上可能出現3個與鍵盤相關的事件，下麵是這些事件發生的常規順序：

  • 用戶按“a”鍵，該鍵將被預處理和調度，同時會觸發KeyDown事件。
  • 用戶按住“a”鍵，該鍵將被預處理和調度，同時會觸發KeyPress事件。
  • 用戶鬆開“a”鍵，該鍵將被預處理和調度，同時會觸發KeyUp事件。

　　但是KeyDown觸發後，不一定觸發KeyUp，當KeyDown 按下後，拖動滑鼠，則不會觸發KeyUp事件。

3．鍵的預處理

　　像其他消息一樣，鍵盤消息是在窗體或控制項的WndProc方法中處理的。窗體或控制項在處理鍵盤消息之前，PreProcessMessage方法會調用一個或多個方法，這些方法可被重寫以處理特殊的字元鍵和物理按鍵。

4. 系統組合鍵的判定

　　在使用鍵盤的時候，通常會使用到CTRL+SHIFT+ALT 類似的組合鍵功能。對於此，如何進行判定？

　　通過KeyUp 事件能夠來處理（這裡說明一下為什麼不用KeyDown，因為在判定KeyDown的時候，CTRL、SHIFT和ALT 屬於一直按下狀態，然後再加另外一個鍵是不能準確捕獲組合鍵，所以使用 KeyDown 是不能準確判斷出的，要通過KeyUp 事件來判定）。

5. 捕獲PrScrn按鍵事件

　　通過一種鉤子的方式可以判定PrScrn 按鍵事件，鉤子可以獲取任何鍵盤事件。

6．KeyPress 和KeyDown 、KeyUp之間的區別

  1. KeyPress主要用來捕獲數字(註意：包括Shift+數字的符號)、字母（註意：包括大小寫）、小鍵盤等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開始鍵}和方向鍵外的ANSI字元
  2. KeyDown 和KeyUp 通常可以捕獲鍵盤除了PrScrn所有按鍵(這裡不討論特殊鍵盤的特殊鍵）
  3. KeyPress 只能捕獲單個字元
  4. KeyDown 和KeyUp 可以捕獲組合鍵。
  5. KeyPress 可以捕獲單個字元的大小寫
  6. KeyDown和KeyUp 對於單個字元捕獲的KeyValue 都是一個值，也就是不能判斷單個字元的大小寫。
  7. KeyPress 不區分小鍵盤和主鍵盤的數字字元。
  8. KeyDown 和KeyUp 區分小鍵盤和主鍵盤的數字字元。
  9. 其中PrScrn 按鍵KeyPress、KeyDown和KeyUp 都不能捕獲。

/*********************************************************************************************************************************************************************************************************************************************************************************/

　　抄抄了那麼多，感覺有點過於理論化，其實我們在按下一個鍵時，KeyDown和KeyPress兩個都要發生(一個在前，一個在後)，雖然兩個看上去沒什麼區別，但是兩者還是有本質的區別。而 keyup 則是我們將按鍵抬起時觸發的，屬於整個按鍵過程的最後階段，所以有其特定的用處，最典型的就是左右數據預覽，以及獲取最後一個點擊字元。

下麵是測試代碼和註釋：(結果就只能自己打開去看了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>keydown、keypress、keyup的區別</title>
    <style>
        .area{
            float: left;
            display: inline;
            width: 50%
        }
    </style>
</head>
<body>
<div>
    <!--keydown、keypress、keyup觸發的先後順序-->
    <span>隨意輸入一些字元:</span> <input class="keydown-keyup" style="background-color:#00FFFF" type="text"/>
    <p>當 keydown、keypress 和 keyup 事件相繼觸發時，輸入區域會改變顏色。從而可以看出三個事件觸發的先後順序</p>
    <p>在 keypress 一直按著不放開，keyup事件不會觸發，但該按鍵狀態碼會一直被獲取，文本框數據會一直添加</p>
</div>

<div style="margin-top: 100px">
    <div style="width: 100%">
        <textarea id="t1" class="area"></textarea>
        <div id="v1" class="area"></div>
    </div>
    <!--按鍵按下觸發keydown事件，t1顯示當前按鍵字元，v1始終能獲取到新輸入的字元數據。按鍵不放開當前字元會一直往後添加，同樣v1的數據也會一直往後添加-->

    <div style="width: 100%">
        <textarea id="t2" class="area"></textarea>
        <div id="v2" class="area"></div>
    </div>
    <!--按鍵按下觸發keypress事件，t2顯示當前按鍵字元，v2始終能獲取到新輸入的字元數據。按鍵不放開當前字元會一直往後添加，同樣v2的數據也會一直往後添加-->

    <div style="width: 100%">
        <textarea id="t3" class="area"></textarea>
        <div id="v3" class="area"></div>
    </div>
    <!--按鍵按下觸發keyup事件，t2顯示當前按鍵字元，按鍵不放開則當前字元會一直往後添加，但v2並不能獲取到新輸入的字元數據-->
    <div style="clear: both"></div>

    <!--這裡分別給三個textarea標簽綁定三種事件，其中t1，t2均不能實時將數據同步到v1，v2中(總是缺少當前正在輸入的字元)，keydown、keypress因為是按下按鍵就觸發，所以按下按鍵時當前輸入字元並未返回，因而不能實時同步。
    而keyup則不一樣，keyup必須等到按鍵鬆開才能觸發，才能將數據同步，當然如果我一直按著按鍵(一直處於keydown、keypress階段)，雖然textarea數據一直在往後添加，但是下麵div的數據卻無法同步，必須要按鍵鬆開才能同步。
    這樣就說明瞭這三種事件觸發之間的區別，keydown是在按下時觸發，雖然返回鍵盤的代碼，但還沒得到最後的輸入結果；keypress也是一樣，雖然得到了ASCII字元，但還沒得到需要的字元；keyup才能得到最後的完整數據。
    因而keyup適用於文本框的數據輸入和同步，keydown 與 keypress更適用於通過鍵盤控制頁面功能的實現(如回車事件)。所以可以根據不同的需求，適當的選擇!-->

</div>

<div style="margin-top: 100px">
    <!--在看了三者之間的細小差別後，再來看下keydown、keypress之間的區別-->
    <div>
        <span>隨意輸入一些字元:</span><input class="keydown" type="text"/>
        <p>這裡顯示keydown事件返回的數據:</p><span id="keydown"></span>
    </div>
    <div>
        <span>隨意輸入一些字元:</span><input class="keypress" type="text"/>
        <p>這裡顯示keypress事件返回的數據:</p><span id="keypress"></span>
    </div>
</div>

<script type="text/javascript" src="./framework/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".keydown-keyup").keydown(function () {
            console.log("keydown正在執行!");
            $(".keydown-keyup").css("background-color", "#FF0000");
        });
        $(".keydown-keyup").keypress(function () {
            console.log("keypress正在執行!");
            $(".keydown-keyup").css("background-color", "#FFA500");
        });
        $(".keydown-keyup").keyup(function () {
            console.log("keyup正在執行!");
            $(".keydown-keyup").css("background-color", "#4B0082");
        });

        $('#t1').on('keydown', function () {
            $('#v1').text($(this).val());
        });
        $('#t2').on('keypress', function () {
            $('#v2').text($(this).val());
        });
        $('#t3').on('keyup', function () {
            $('#v3').text($(this).val());
        });


        $(".keydown").keydown(function (event) {
            console.log(event);
            var key =  window.event ? window.event.keyCode : event.which;
            if (window.event) { //ie
                $("#keydown").html("Key: " + key);
                window.event.returnValue = false;
            } else {    //非IE
                $("#keydown").html("Key: " + key);
                return false;
            }
        });
        $(".keypress").keypress(function (event) {
            console.log(event);
            var key =  window.event ? window.event.keyCode : event.which;
            if (window.event) { //ie
                $("#keypress").html("Key: " + key);
                window.event.returnValue = false;
            } else {    //非IE
                $("#keypress").html("Key: " + key);
                return false;
            }
        });
        /**通過對event事件對象的對比，發現keydown和keypress兩個事件返回的事件對象基本相同，但有一個很細微的卻很重要的區別：charCode值不一樣
         * keydown 事件對象的charCode值始終為：0
         * keypress 事件對象的charCode值卻跟keyCode值一樣(當前按鍵字元的ASCII字元)。
         * 所以：charCode 返回的是 onkeypress 事件觸發鍵值的字元代碼(ASCII字元代碼，就是ASCII碼，一一對應)。而 keyCode 返回的是 onkeydown onkeypress 以及 onkeyup 事件的鍵的代碼(還是ASCII碼)。
         * 整個系統都是採用ASCII碼表(ASCII字元和ASCII碼一一對應，比如鍵盤"p"鍵，對應ASCII字元碼:"p"，對應ASCII碼:112)
         */
    });
</script>
</body>
</html>

　　兜了一個大圈，終於對這三者之間的區別有了一定的瞭解。

　　總結：keyup適用於文本框的數據輸入和同步，以及數據的獲取；keydown 與 keypress更適用於通過鍵盤控制頁面功能的實現(如回車事件)。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 把微信小程式非同步API為Promise，簡化非同步編程
    把微信小程式非同步API轉化為Promise。用Promise處理非同步操作有多方便，誰用誰知道。 微信官方沒有給出Promise API來處理非同步操作，而官方API非同步的又非常多，這使得多非同步編程會層層回調，代碼一複雜，回調起來就想砸電腦。 於是寫了一個通用工具，把微信官方的非同步API轉化為Promi ...
  • Javascript toString()、toLocaleString()、valueOf()三個方法的區別
    Array、Boolean、Date、Number等對象都具有toString()、toLocaleString()、valueOf()三個方法，那這三個方法有什麼區別？？？ 一、JS Array 例子： var array = new Array("niu","li","na"); console ...
  • es6 解構賦值
    結構賦值即按照一種模式對變數進行賦值，分為數組解構賦值和對象結構賦值 1. 數組結構賦值 let a; [a,b]=[1,2]//數組類型解構賦值 console.log(a);//1 [a,b,...rest]=[1,2,3,4,5,6]//輸出1,2,[3,4,5,6] [a,b,c=3]=[1 ...
  • jQuery全屏滾動插件fullPage使用
    1. 引入jquery.js和jquery.fullPage.min.js <script src="jquery.min.js"></script> <script src="chajian/jquery.fullPage.min.js"></script> 2. 書寫html <div id=" ...
  • jQuery獲取Select option 選擇的Text和 Value
    獲取一組radio被選中項的值:var item = $('input[name=items][checked]').val();獲取select被選中項的文本var item = $("select[@name=items] option[@selected]").text(); 獲取select ...
  • ES6的小知識（前半部分）
    一、let與const的使用 let：用來聲明一個變數，與var類似 1.用let聲明的變數，所聲明的變數只在命令所在的代碼塊內有效 2.用let聲明的變數在域解析的時候是不會被提升的 3.let不允許在同一作用域下聲明已經存在的變數 4.let和var在for迴圈里的區別 另外在for迴圈語句里的 ...
  • 非同步載入的方式
    一、同步載入與非同步載入的形式 1. 同步載入 我們平時最常使用的就是這種同步載入形式：<script src="http://yourdomain.com/script.js"></script> 同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，停止了後續的解析，因此停止了後續的文件載入（如圖像）、 ...
  • js中改變this指向的call、apply、bind 方法使用
    前言： 由於js 中this的指向受函數運行環境的影響，指向經常改變，使得開發變得困難和模糊，所以在封裝sdk，寫一些複雜函數的時候經常會用到this 指向綁定，以避免出現不必要的問題，call、apply、bind基本都能實現這一功能，現對這三種方法使用總結一下： 1、function.proto ...
一周排行
    -Advertisement-
    Play Games
  • .NET 6 Entity Framework Core Db First（1） 創建模型
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 資料庫升級PostgreSql+Garnet
    目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊，後續可能不再更新Garne ...
  • 如何基於surging架設流媒體視頻推流（視頻講解）
    C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了，幾乎是無縫銜接，很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高，我只要會調用方法就行。這個系統交付之後不會有太多問題，更多應該是做小需求，有大的開發任務應該也是第二期的事，嗯？怎麼感覺我變成運維了？而 ...
  • EAV模型（實體-屬性-值）的設計和低代碼的處理方案（2）--數據的查詢處理
    我在隨筆《EAV模型（實體-屬性-值）的設計和低代碼的處理方案（1）》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼（或者說無代碼）的一些實現思路，在本篇隨筆中，我們來分析一下這種針對通用業務，且只需定義就能構建業務模塊存儲和界面的解決方案，其中的數據查詢處理的操作。 ...
  • C# 程式集、模塊和類型概念及關係
    對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1，這將啟用NTP伺服器功 ...
  • Django信號與擴展：深入理解與實踐
    title: Django信號與擴展：深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分：Django信號基礎 Djan ...
  • Django3.2安裝源碼xadmin2步驟以及遇到的問題
    使用xadmin2遇到的問題&解決 環境配置： 使用的模塊版本： 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 原創->CommonsCollections1-DefaultMap鏈
    今天我打算整點兒不一樣的內容，通過之前學習的TransformerMap和LazyMap鏈，想搞點不一樣的，所以我關註了另外一條鏈DefaultedMap鏈，主要調用鏈為： 調用鏈詳細描述： ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 05-應用級開發者 AI 時代破局點
    後端應用級開發者該如何擁抱 AI GC？就是在這樣的一個大的浪潮下，我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型，跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好，或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • Java面試題：讓依賴註入變得簡單，面對@Autowired和@Resource，該如何選擇？
    @Autowired是Spring框架提供的註解，@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配，而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean，而@Resourc... ...
所有分類