第58節 KeyboardEvent鍵盤事件和TextEvent文本事件-王唯

本内容是用于Web前端開發的Javascript視訊的課件，請通過Master Brother JavaScript視訊課程學習。

DOM2級事件最初指定鍵盤事件，但在完成之前删除了相應的内容;

鍵盤事件類：

描述使用者與鍵盤的互動，提供關鍵的詳細資訊，并将其從 UIEvent 類繼承;

它使用三個鍵盤事件來識别不同類型的鍵盤活動：

按鍵：按下鍵盤上的任何一個鍵時觸發，如果按住它，它将被反複觸發;

按鍵：按下鍵盤上的字元鍵時觸發，如果按住，則反複觸發;

小鍵盤：釋放鍵盤上的鍵時觸發;

按鍵和按鍵是低級鍵盤事件，無論按下或釋放任何鍵，都會觸發它們。

盡管所有元素都支援上述3個事件，但它們最常用于通過文本框輸入文本時;

當使用者按下鍵盤上的字元鍵時，觸發事件的順序為：按鍵 - >按鍵 - >鍵;

如果使用者按一個字元鍵不放，會反複觸發按鍵和按鍵事件，直接由使用者釋放鍵，直到;

如果按下非字元鍵，觸發事件的順序為：按鍵 - >鍵;

鍵盤事件也支援輔助鍵，其事件對象中還有shiftKey、ctrlKey、altKey和metaKey屬性，IE不支援metaKey;

事件對象屬性：

鍵碼鍵碼屬性：鍵盤上的鍵将對應于一個Unicode值，這個值是keyCode鍵碼;

對于按鍵和按鍵事件，所有按鍵在按下時都可以觸發，是以它們都關心鍵，其對象的keyCode傳回鍵碼，對應于鍵盤上特定的實體鍵;

鑰匙 鍵代碼

倒退 8

頁籤 9

輸入 13

班次 16

控制 （Ctrl）17

備選方案18

暫停/中斷 19

瓶蓋鎖 20

退出 （Esc）27

空間 32

上一頁 33

向下翻頁 34

結束（結束）35

首頁 36

向左箭頭 37

向上箭頭 38

向右箭頭 39

向下箭頭 40

插入（英寸）45

删除 （Del）46

字母鍵 （A-Z） 65-90

左視窗鍵 91

右視窗鍵 92

上下文菜單鍵 93

數字鍵盤 0-996-105

數字鍵盤 s.107

數字小鍵盤 - 和大鍵盤 -109

數字鍵盤.110

數字鍵盤/111

F1-F12112-123

數字鎖 144

滾動鎖 145

分号 FF 為 59，其他為 186

等于 （-） 187

小于（或逗号）188

減号 （-） 189

大于（或句号）190

正斜杠 191

水槽注釋 （'） 192

等于 61

左括号 219

反斜杠 220

右括号 221

單行報價 222

Fn255

注意：在Firefox和低版本Opera中，分号鍵的值為59，即ASCII中分号的編碼;

對于按鍵事件，隻按可列印字元鍵觸發，此時，keyCode傳回與Unicode字元碼對應的字元，這與鍵碼不同;

鍵代碼

0-948-57

A-Z65-90

a-z97-122

空間 32

波浪形 126

感歎号 33

@64

#35

$35

%37

&38

(40

)41

+43

* 42

^93

_95

左括号 91

反斜杠 92

右括号 93

左大括号 123

垂直 124

右大括号 125

單行報價 39

雙引号 34

科隆 58

分号 59

逗号 44

期間 46

斜箱 47

小于數字 60

大于數字 62

問号 63

傳回 13

例：

示例：屏蔽組合鍵，例如：

字元編碼 charCode 屬性：此屬性傳回觸發按鍵事件時按下的字元鍵的字元 Unicode 值，在其他事件中傳回 0;

在keypress事件中，keyCode屬性傳回一個值（也是字元編碼，是以它）與charCode一緻;

IE8 和以下及更低版本的操作器不支援 charCode 屬性，這些屬性儲存在鍵按事件對象發生的 keyCode 中;

此外，一些較低版本的浏覽器在生成非列印字元時也會觸發按鍵事件，但此時它們的charCode值為0，這允許您檢測其charCode屬性值為0的情況;

特别要注意的是，通過中文輸入法輸入的字元不會觸發按鍵事件，但會觸發按鍵和鍵控事件，但是，事件對象的charCode為0，keyCode始終傳回229;

跨浏覽器擷取字元編碼，并将其添加到 eventutil .js 檔案中：

應用：

屬性：在按下鍵時傳回 charCode 代碼，該代碼可能發生在按鍵、按鍵和按鍵事件中;

在按鍵事件中，其行為和值與charCode一緻，在鍵控和鍵控事件中可以傳回UniCode代碼的所有鍵;

IE8 及更早版本不支援 where 屬性，不支援它的浏覽器可以使用 keyCode 屬性;

在 DOM3 事件标準中，此屬性已被删除，但所有浏覽器都支援;

鍵屬性：DOM3級事件對鍵盤事件進行一些更改，删除鍵碼，charCode和耳語屬性，并添加新屬性：鍵，用于擷取鍵名;

添加key屬性是為了替換keyCode，其值是相應的文本字元（如"a"或"A"），這是鍵名，當按下非字元鍵時，鍵值是相應鍵的名稱（如"Shift"或"Down"）;

示例：驗證僅接受數字的電話号碼，加上 、（） 、-、 ArrowLeft、ArrowRight、Delete 或 Backspace，例如：

示例：使用擊鍵移動元素：

所有浏覽器都支援鍵屬性，IE還支援類似于key的char屬性，但隻有字元鍵傳回值;

Safari 和 Chrome 還為事件對象定義了類似鍵的 keyFuler 屬性，為功能鍵傳回"Shift"、"Enter"等，對于可列印字元，傳回該字元的 Unicode 編碼，例如 A 鍵，值為 "U-0041";

代碼屬性：表示觸發事件的實體鍵;

密鑰<字母>，如KeyA，KeyB等><;

在不同的系統上，相應的實體按鈕鍵值會有所不同，例如在視窗的情況下：

鍵代碼值

ESCEscape

數字 0-9數字0-數字9

減去"減号"

平等"平等"

倒退"倒退"

頁籤"頁籤"

A-ZKeyA-Keyz

Bracket"BracketLeft"/"BracketRight"

輸入"輸入"

Control"ControlLeft"/"ControlRight"

分号"分号"

報價"報價"

反向引用"反向引用"

Shift"ShiftLeft"/"ShiftRight"

反斜杠"反斜杠"

逗号"逗号"

期間"期間"

斜杠"斜杠"

Alt"AltLeft"/"AltRight"

空間"空間"

CapsLock"CapsLock"

F1-F12"F1"-"F12"

暫停"暫停"

滾動鎖"滾動鎖"

列印螢幕"列印螢幕"

數字小鍵盤0-9"數字小鍵盤0"-"數字小鍵盤9"

數字小分法"數字小乘法"（減法）

NumpadAdd "NumpadAdd" （添加）

NumpadDecimal"NumpadDecimal"

NumpadMultiply"NumpadMultiply"

Int 反斜杠 "IntlBackslash" （反斜杠，除法）

NumpadEqual "NumpadEqual" （等于）

NumLock"NumLock"

家 "家"

結束"結束"

ArrowUp"ArrowUp"

ArrowLeft"ArrowLeft"

箭權"箭權"

ArrowDown "ArrowDown"

PageUp"PageUp"

下一頁"下一頁"

插入"插入"

删除"删除"

Meta"MetaLeft"/ "MetaRight

ContextMenu"ContextMenu"

權力"權力"

浏覽器搜尋"浏覽器搜尋"

BrowserFavorites "BrowserFavorites"

浏覽器重新整理"浏覽器重新整理"

浏覽器停止 "浏覽器停止"

BrowserForward "BrowserForward"

BrowserBack "BrowserBack"

啟動應用程式1啟動應用程式1"

LaunchMail "LaunchMail"

此外，對于輸入法輸入，鍵屬性不被識别，它将傳回"Process"，并傳回代碼屬性或其實體鍵碼;

鍵值在不同的語言中是不同的，但代碼是相同的;

示例：使用鍵盤控制元素：結構和樣式：

Repeat 屬性：是傳回布爾值的隻讀屬性，如果鍵一直按住，則傳回 true

輔助鍵：鍵盤事件對象還支援輔助鍵，具有 altKey、ctrlKey、shiftKey 和 metaKey 屬性（與滑鼠事件的輔助鍵一樣）：

GetModifierState（） 方法：

DOM3級别還将getModifierState（）方法添加到對象中，該對象接收一個參數，該參數等于Shift，Control，AltGraph或Meta的字元串，訓示要檢測的輔助鍵，如果指定的輔助鍵處于活動狀态，則該方法傳回true或傳回false;

類似的屬性可以通過事件對象的shiftKey，altKey，ctrlKey和metaKey屬性獲得;

位置屬性：DoM3 級事件添加一個名為 location 的屬性，傳回一個訓示按鍵位置的長常量值：DOM_KEY_LOCATION_STANDARD值 0 表示預設鍵盤，DOM_KEY_LOCATION_LEFT值 1 表示左側位置（如左側的 Alt 鍵），DOM_KEY_LOCATION_ RIGHT 值 2 表示右位置（例如，右側的 Shift 鍵）， DOM_KEY_LOCATION_NUMPAD數字小鍵盤的值為 3，移動裝置小鍵盤的值為 DOM_KEY_LOCATION_MOBILE 4，DOM_KEY_LOCATION_JOYSTICK搖桿（例如控制器）的值為 5 ;(其中 4 和 5 被丢棄）

位置屬性可用于按鍵和鍵控事件，但不能用于按鍵事件;IE8 和其他較低版本的浏覽器不支援 logation 屬性;而較低版本的Chrome還支援keyLocation等效屬性，但該值除了按數字小鍵盤傳回3外還傳回0，現在已丢棄;

示例：鍵盤快捷鍵的鍵盤映射類：說明：将 PageUp、Alt_Z 和 ctrl-alt-shift-F5 等鍵辨別符映射到 Javascript 函數，這些函數稱為對擊鍵的響應;unbing（） 方法添加和删除綁定，使用 install（） 方法在 HTML 元素（通常是文檔對象）上配置 Keymap，通過在元素上注冊按鍵事件處理程式來配置 Keymap，并且每次按下鍵時，處理程式都會檢查與鍵相關的函數，如果是，則調用它 如果可以在鍵控事件處理程式中使用 DOM3 事件的 key 屬性， 如果沒有，請查找 Webkit 的 keyJeller 屬性，然後使用它，否則，使用 keyCode 屬性;将其另存為鍵盤映射.js;

文本事件：

在可編輯區域中輸入字元時，将觸發隻有一個文本輸入的文本類事件;

但隻有IE支援它，而不是所有其他浏覽器，但是有一個非标準的文本輸入事件，注意到輸入的第一個字母是大寫的;

但除了Webkit浏覽器支援外，IE和Firefox不支援textInput事件;

此事件補充了按鍵，目的是在向使用者顯示文本之前攔截文本，即在文本插入文本框之前觸發文本輸入事件;

但也有一些差別：

任何可以獲得焦點的元素都可以觸發按鍵事件，但隻有可編輯的元素才能觸發文本輸入事件;

僅當使用者按下可以輸入實際字元的鍵時，才會觸發文本輸入事件，而當按下影響文本顯示的鍵（例如，倒退鍵）時，才會觸發按鍵事件;

文本輸入事件對象還包含一個資料屬性，其值是輸入的字元;

此外，文本輸入在鍵控之前觸發，然後按鍵，如果在按鍵事件中被阻止預設行為，則可能不會觸發文本輸入事件，例如：

文本輸入事件不是鍵盤特定的事件，無論是通過鍵盤、剪切和粘貼、拖放等，每當文本輸入發生時，都會被觸發;

事件對象的 inputMethod 屬性是一組常量值，表示如何輸入文本（即所謂的輸入源），例如：0 表示浏覽器不确定如何輸入，1 表示使用鍵盤輸入輸入，2 表示粘貼，3 表示拖動， 4 表示使用 IME 輸入，5 表示通過選擇表單中的輸入輸入來輸入，6 表示手動輸入，7 表示通過語音輸入。8表示輸入是通過幾種方法組合進行的，9表示是通過腳本輸入的;

此屬性允許您确定如何将文本輸入到控件中，但隻有 IE 支援 inputMethod 屬性;

對于鍵盤輸入，資料屬性通常隻包含一個字元，但其他輸入源通常可能包含多個字元。對于按鍵事件，按鍵事件表示輸入的單個字元，使用keyCode或charCoode屬性儲存，傳回相應的Unicode編碼，是以需要轉換String.fromCharCode（）方法，例如：

可以通過取消文本輸入、文本輸入和按鍵事件來阻止字元輸入，這意味着您可以使用這些事件來篩選輸入，例如篩選使用者輸入并将其另存為 InputFilter .js

輸入事件事件：

InputEvent 類用于構造與字元輸入相關的事件對象;

輸入事件：

此外，可編輯元素還可以添加輸入事件;

在新輸入的文本實際插入到可編輯區域元素之前觸發按鍵和文本輸入事件，是以可以取消事件或在事件處理程式中阻止文本插入，而插入文本後觸發事件的輸入事件無法取消，并且無法在其事件對象中指定最新文本;

與文本事件一樣，該事件具有資料和 isComposing 屬性;

資料屬性：隻讀，傳回目前輸入的字元串，如果是删除操作，則值為空字元串;

IsComposing 屬性：隻讀，傳回一個布爾值，訓示該事件是在 compositionstart 事件之後和觸發 composend 事件之前觸發的，即目前輸入的字元由輸入法輸入;

如果更改未插入的文本，例如删除字元時，它可能是空字元串;

InputType 屬性：表示目前正在編輯的文本類型，如果插入文本，則值為 insertText，如果是 Delete 删除字元，如果是 DeleContentForward，如果是倒退删除字元，如果是删除字元，如果剪切文本，則值為 deleteCut，如果是傳回換行符， 該值為insertLineBreak，如果它是粘貼的輸入，則該值為insertFromPaste，如果将其拖入，則該值為insertFromDrop;

雖然IE支援輸入事件，但它将其視為正常的事件類型，是以它沒有資料并且是壓縮屬性;

IE8及以下版本不支援此事件，它提供了專用的産品更改事件，可用于檢測文本輸入元素的值屬性的變化;

例如：跨平台：

beforeinput事件：beforeinput> <input觸發，<選擇>或<textarea >的值即将被修改，并且該事件也可以在設定為true的元素上觸發，并且在designMode打開後的任何元素上觸發該事件;

事件可以取消，如果取消，則不觸發輸入事件;

更改事件：當使用者更改元素的值< >，<選擇>，<文本區域>并送出更改時，将觸發更改事件;

活動不可取消;