jQuery(3)——jQuery鍵盤事件

阿新 • • 發佈：2018-12-12

jQuery鍵盤事件

- keydown

在鍵盤上按下某鍵時發生，一直按著則會不斷觸發（opera瀏覽器除外），它返回的是鍵盤程式碼;

- keyup

使用者鬆開某一個按鍵時觸發，與keydown相對，返回鍵盤程式碼.

- keypress

在鍵盤上按下一個按鍵，併產生一個字元時發生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下並不會產生字元，所以監聽無效，換句話說，只有按下能在螢幕上輸出字元的按鍵時keypress事件才會觸發。若一直按著某按鍵則會不斷觸發。

經常配合這些方法使用的是 which 屬性

which

which 屬性指示按了哪個鍵或按鈕。

一個demo，熟悉keydown，keyup，keypress和which的聯絡。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery鍵盤事件學習</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" 
></script>
    <script>
    $(document).ready(function(){
        $("body").keydown(
            function(event){
                $("#right").append("keydown <br>");
                $("#left").append(String.fromCharCode(event.which)); //列印字母
                //$("#test").append(event.which+"<br>");    //輸出ASCII碼 

               //alert(event.which)
            }
        );
        $("body").keyup(
            function(event){
                $("#right").append("keyup <br>");
            }
        );
        $("body").keypress(
            function(event){
                $("#right").append("keypress <br>");
            }
        );
    })
    </script>
    <style>
    #main{
        width:800px;
        height: auto;
        margin:0 auto;
        border:2px solid green;
        overflow: hidden;
    }
    #left,#right{
        width: 396px;
        height: 300px;
        background-color: rgb(245, 172, 76);
        border:2px solid yellow;
        word-wrap:break-word;
    }
    #left,#right{
        float:left;
    }
    #right{
        overflow: auto;
    }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

線上預覽：

jQuery(3)——jQuery鍵盤事件

jQuery鍵盤事件 - keydown 在鍵盤上按下某鍵時發生，一直按著則會不斷觸發（opera瀏覽器除外），它返回的是鍵盤程式碼; - keyup 使用者鬆開某一個按鍵時觸發，與keydown相

Jquery 偵聽鍵盤事件並獲取當前焦點控制元件ID

jQuery基礎（鼠標事件，表單事件，鍵盤事件，自定義事件篇）

1.7 傳遞 ret 文本 leave 右鍵 page content gree 1.jQuery鼠標事件之click與dbclick事件方法一：$ele.click()（不帶參數） <div id="test">點擊觸發<div> $(

jQuery-3.事件篇---表單事件

中產 value 問題 ron red his des () code jQuery表單事件之blur與focus事件在之前2.8與2.9節我們學過了表單處理事件focusin事件與focusout事件，同樣用於處理表單焦點的事件還有blur與focus事件

jQuery-3.事件篇---事件綁定與解綁

cto 最大匹配 -- regular nbsp 事件處理程序多個快捷方式 on()的多事件綁定之前學的鼠標事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數，所有這類事件都是屬於快捷處理。翻開源碼其實可以看到，所有的快捷事件在底層的處理都

jQuery-3.事件篇---事件對象的使用

綁定接受事件對象 nts 跨瀏覽器 func on() aar 就是 jQuery事件對象的作用事件中的Event對象容易被初學者忽略掉，可能大多時候初學者不知道怎麽去用它，但有些時候它還是非常有用的一個標準的"click"點擊事件 $(elem).o

用jQuery來綁定事件的3種方法和區別

委托 images 不同的 doc mage his ges utf htm 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

JQuery——鍵盤事件.keydown()、.keyup()和.keypress()

input元素 soft 組合鍵 pan 獲取得到輸入文本獲得 down 鍵盤事件.keydown()、.keyup()和.keypress()1 .keydown()當用戶在一個元素上第一次按下鍵盤上字母鍵的時候，就會被觸發，與基本事件參數處理保持一

JavaScript&jQuery.鍵盤事件

-s 變化 viewport event lse htm func asc html 鍵盤事件鍵盤事件，當用戶操作鍵盤時發生。常見的鍵盤事件有： input，當<input>或<textarea>元素的值發生變化時觸發。 keydonw，

jQuery鍵盤事件，繫結事件與移除事件，複合事件

鍵盤事件是指每次按下或者釋放鍵盤上得按鍵時所產生的事件，常用的鍵盤事件的方法： keydown() :按下鍵盤時觸發的事件方法； keyup() :釋放按鍵時觸發的事件方法； keypress() :產生可列印的字元時觸發的事件

3. jQuery事件的鏈式寫法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery事件的鏈式寫法</title> <link href="../define.

jQuery 2.0.3 原始碼分析事件體系結構

那麼jQuery事件處理機制能幫我們處理那些問題？毋容置疑首先要解決瀏覽器事件相容問題可以在一個事件型別上新增多個事件處理函式，可以一次新增多個事件型別的事件處理函式提供了常用事件的便捷方法支援自定義事件擴充套件了組合事件提供了統一的事件封裝、繫結、執行、銷燬機制 …… 為

jQuery 2.0.3 原始碼分析事件繫結

事件(Event)是JavaScript應用跳動的心臟，通過使用JavaScript ，你可以監聽特定事件的發生，並規定讓某些事件發生以對這些事件做出響應事件的基礎就不重複講解了，本來是定位原始碼分析實現的，所以需要有一定的基礎才行為了下一步更好的理解內部的實現,所以首先得清楚的認識到事件介面的劃分

JQuery繫結click事件的3種寫法

1.首先你得有jquery 1.7以上的版本的js 2.將js匯入專案 3.jsp原始碼 <%@ page language="java" contentType="text/html; ch

jquery鍵盤事件

bsp doc 回車當我 city eve () cli war 場景：當我們遇到onclick按鈕事件時需要按回車執行時就用到了鍵盤監聽事件例如：<button id="sign_in_button" class="btn btn-lg btn-warning

javascript與jquery動態綁定事件需要先加載頁面註意的坑

如果 cli ntb on() ner nbsp 自動加載 load query 1、javascript的Dom對象動態事件綁定註意以下2點，如：document.getElementById（"id名稱"）.addListenerEvent("事件名稱"，functio

jquery的自定義事件通過on綁定trigger觸發

測試觸發調用示例事件觸發我們 trigge spa src margin jquery綁定自定義事件，可以實現預先綁定好一個處理方法，當需要使用的時候利用jquery trigger來觸發自定義事件，以達到方便快捷的目的。我們來假設一個這樣的場景，一個textare

JQuery 自己主動觸發事件

ack 用戶操作頁面 -m jquer 默認 app 傳遞數據就會經常使用模擬有時候，須要通過模擬用戶操作，來達到單擊的效果。比如在用戶進入頁面後，就觸發click事件，而不須要用戶去主動單擊。在JQuery中。能夠使用trigger()方法完畢模擬操作。比如

代碼收藏系列--jquery--篩選器、事件綁定技巧

文本 not input ble logs 超鏈接 p s 標題 jquer Jquery篩選器的一些常用技巧，比如過濾屬性等 /* 過濾獲取沒有含data-xsui-grid-colspan的節點 */$(this).find(‘.xsui-grid-cell:not([

js學習總結----jQuery之動畫 ajax 事件

win 學習總結 top 上一個淡出 set 返回 ati var <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

jQuery(3)——jQuery鍵盤事件

jQuery鍵盤事件

which

相關推薦