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 MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類