JavaScript 鍵盤事件實例

eyCode 獲取用戶按下鍵盤的哪個按鍵

例子：鍵盤控制Div移動

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<script>
document.onkeydown=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');

if(oEvent.keyCode==37)
{
oDiv.style.left=oDiv.offsetLeft-10+'px';
}
else if(oEvent.keyCode==39)
{

oDiv.style.left=oDiv.offsetLeft+10+'px';
}
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

其他屬性 ctrlKey、shiftKey、altKey

例子：提交留言回車提交 ctrl+回車提交

實例1: 點擊按鈕提交留言

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
window.onload=function ()
{
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
var oBtn=document.getElementById('btn1');

oBtn.onclick=function ()
{
oTxt2.value+=oTxt1.value+'\n';
oTxt1.value='';
};
};
</script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="發布" /><br>
<textarea id="txt2" rows="10" cols="40"></textarea>
</body>
</html>

實例2: 回車提交

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
window.onload=function ()
{
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');

oTxt1.onkeydown=function (ev)
{
var oEvent=ev||event;

if(oEvent.keyCode==13) //判斷回車鍵(Enter)
{
oTxt2.value+=oTxt1.value+'\n';
oTxt1.value='';
}
};
};
</script>
</head>
<body>
<input id="txt1" type="text" /><br>
<textarea id="txt2" rows="10" cols="40"></textarea>
</body>
</html>

實例3: ctrl+回車提交

得收藏的HTML DOM事件和鼠標鍵盤事件

onabort//圖像的加載被中斷。

onblur//元素失去焦點。

onchange//域的內容被改變。

onclick//當用戶點擊某個對象時調用的事件句柄。

ondblclick//當用戶雙擊某個對象時調用的事件句柄。

onerror//在加載文檔或圖像時發生錯誤。

onfocus//元素獲得焦點。

onkeydown//某個鍵盤按鍵被按下。

onkeypress//某個鍵盤按鍵被按下并松開。

onkeyup//某個鍵盤按鍵被松開。

onload//一張頁面或一幅圖像完成加載。

onmousedown//鼠標按鈕被按下。

onmousemove//鼠標被移動。

onmouseout//鼠標從某元素移開。

onmouseover//鼠標移到某元素之上。

onmouseup//鼠標按鍵被松開。

onreset//重置按鈕被點擊。

onresize//窗口或框架被重新調整大小。

onselect//文本被選中。

onsubmit//確認按鈕被點擊。

onunload//用戶退出頁面。

值得收藏的HTML DOM事件和鼠標鍵盤事件

altKey//返回當事件被觸發時，"ALT" 是否被按下。

button//返回當事件被觸發時，哪個鼠標按鈕被點擊。

clientX//返回當事件被觸發時，鼠標指針的水平坐標。

clientY//返回當事件被觸發時，鼠標指針的垂直坐標。

ctrlKey//返回當事件被觸發時，"CTRL" 鍵是否被按下。

metaKey//返回當事件被觸發時，"meta" 鍵是否被按下。

relatedTarget//返回與事件的目標節點相關的節點。

screenX//返回當某個事件被觸發時，鼠標指針的水平坐標。

screenY//返回當某個事件被觸發時，鼠標指針的垂直坐標。

shiftKey//返回當事件被觸發時，"SHIFT" 鍵是否被按下。

值得收藏的HTML DOM事件和鼠標鍵盤事件

以上內容為互聯網收集感謝關注與收藏

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

DOM2級事件最初規定了鍵盤事件，但在最終定稿之前又刪除了相應的內容；結果，對鍵盤事件的支持主要遵循的是DOM0級，DOM3級為鍵盤事件制定規范，但現代瀏覽器還沒有完全實現；

txt.addEventListener("keydown", function(event){
    console.log(event);  // KeyboardEvent
});

KeyboardEvent類：

描述了用戶與鍵盤的交互，提供了有關鍵的詳細信息；其繼承自UIEvent類；

其使用3個鍵盤事件用于識別不同的鍵盤活動類型：

keydown：按下鍵盤上的任意鍵時觸發，且按住不放的話，會重復觸發；
keypress：按下鍵盤上的字符鍵時觸發，且按住不放的話，會重復觸發；按下Esc也會觸發這個事件；
keyup：釋放鍵盤上的鍵時觸發；

keydown和keyup是低級鍵盤事件，無論按下或釋放任何鍵，都會觸發；keypress是高級鍵盤事件，只有按下可打印的字符的鍵，才會觸發它；

雖然所有元素都支持以上3個事件，但只有在通過文本框輸入文本時才最常用；

在用戶按了一下鍵盤上的字符鍵時，其觸發事件順序是：keydown –> keypress –> keyup；其中keydown、keypress在文本框發生變化之前被觸發；而keyup則是在文本框已經發生變化之后觸發；

如果用戶按下一個字符鍵不放，就會重復觸發keydown和keypress事件，直接用戶松開該鍵為止；

如果按下的是一個非字符鍵，其觸發事件順序是：keydown –> keyup；如果按住這個非字符鍵不放，會一直重復觸發keydown事件，直到用戶松開為止，此時會觸發keyup事件；

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

<p><textarea id="txtInput"></textarea>
    <textarea id="txt"></textarea></p>
<script>
var txtInput = document.getElementById("txtInput");
txtInput.addEventListener("keydown", handlerEvent, false);
txtInput.addEventListener("keypress", handlerEvent, false);
txtInput.addEventListener("keyup", handlerEvent, false);
function handlerEvent(event){
    var txt = document.getElementById("txt");
    event = event || window.event;
    txt.value += "\n" + event.type;
}
</script>

event對象屬性：

鍵碼keyCode屬性：鍵盤上的鍵都會對應一個Unicode值，這個值就是keyCode鍵碼；該屬性已被DOM3廢棄，但所有瀏覽器都支持它；

對于keydown及keyup事件來說，所有鍵被按下都可以被觸發，所以它們關注的是鍵，其event對象的keyCode返回的就是鍵碼，與鍵盤上一個特定的物理鍵對應；對于字符鍵來說，與它的大小寫無關，如：字母A和a的值都是65；

txt.addEventListener("keydown", function(event){
     // 字母a和A均為65，回車為13，ctrl為17等
    console.log(event.keyCode);
});

鍵鍵碼

退格（Backspace）8
制表（Tab）9
回車（Enter）13
上檔（Shift）16
控制（Ctrl）17
Alt18
暫停/中斷（Pause/Break）19
大寫鎖定（Caps Lock）20
退出（Esc）27
空格（Space）32
上翻頁（Page Up）33
下翻頁（Page Down）34
結尾（End）35
開頭（Home）36
左箭頭（Left Arrow）37
上箭頭（Up Arrow）38
右箭頭（Right Arrow）39
下箭頭（Down Arrow）40
插入（Ins）45
刪除（Del）46
字母鍵（A-Z）65-90
左Windows鍵91
右Windows鍵92
上下文菜單鍵93
數字小鍵盤0-996-105
數字小鍵盤+107
數字小鍵盤-及大鍵盤的-109
數字小鍵盤.110
數字小鍵盤/111
F1-F12112-123
數字鎖（Num Lock）144
滾動鎖（Scroll Lock）145
分號FF為59，其他為186
等于（=）187
小于（或逗號）188
減號（-）189
大于（或句號）190
正斜杠191
沉音符（`）192
等于61
左方括號219
反斜杠220
右方括號221
單引號222
Fn255

注：在Firefox和低版本的Opear中，分號鍵的值為59，即ASCII中分號的編碼；但其他瀏覽器返回186，即鍵碼；

對于keypress事件，只能是可打印字符鍵被按下才會觸發，此時，keyCode返回的是該字符對應的Unicode字符代碼，其與鍵碼是不一樣的；

txt.addEventListener("keydown", function(event){
    console.log("鍵碼：" + event.keyCode); // A和a為65
});
txt.addEventListener("keypress", function(event){
    console.log("字符代碼：" + event.keyCode); // A為65，a為97
});

鍵代碼

0-948-57
A-Z65-90
a-z97-122
空格32
波浪符126
感嘆號33
@64
#35
%37
&38
(40
)41
+43
* 42
^94
_95
左方括號91
反斜杠92
右方括號93
左花括號123
豎線124
右花括號125
單引號39
雙引號34
冒號58
分號59
逗號44
句號46
斜框47
小于號60
大于號62
問號63
回車13

示例：

// 數字編輯限制
// 8: 退格鍵
// 46：Delete
// 37-46：方向鍵
// 48-57：小鍵盤區的數字
// 96-105：主鍵盤區的數字
// 110、190：小鍵盤區和主鍵盤區的小數點
// 189、109：小鍵盤區和主鍵盤區的負號。
// 13: 回車
// 9：Tab
var txt = document.getElementById("txt");
txt.addEventListener("keydown", numOnkeyDown, false);
function numOnkeyDown(event){
    if(!isValidNum(event.keyCode)){
        event.preventDefault();
        return false;
    }
}
function isValidNum(keyCode){
    return (keyCode == 8 ||
            keyCode == 9 ||
            keyCode == 46 ||
            keyCode == 109 ||
            keyCode == 110 ||
            keyCode == 189 ||
            keyCode == 190 ||
            (keyCode >= 37 && keyCode <= 46) ||
            (keyCode >= 48 && keyCode <= 57) ||
            (keyCode >= 96 && keyCode <= 105)
            );
}

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

document.addEventListener("keydown", keyDownHandler, false);
function keyDownHandler(event){
    // 屏蔽Alt + 方向鍵
    if((event.altKey) && 
        ((event.keyCode == 37) || (event.keyCode == 39))){
            console.log("不能使用Alt+方向鍵前進或后退網頁");
            event.preventDefault();
    }
    // 屏蔽退格刪除鍵和F5刷新鍵
    if((event.keyCode == 8) || (event.keyCode == 116)){
        event.preventDefault();
    }
    // 屏蔽Ctrl + n
    if((event.ctrlKey) && (event.keyCode == 78)){
        event.preventDefault();
    }
    // 屏蔽F11，即全屏
    if(event.keyCode == 122){
        event.preventDefault();
    }
    // 以下為禁止查看網頁源代碼，即禁用
    // F12、Ctrl+Shift+I、Ctrl+u及鼠標右擊
    // 屏蔽Ctrl + u，即查看源文件
    if((event.ctrlKey) && (event.keyCode == 85)){
        console.log("no no");
        event.preventDefault();
    }
    // 屏蔽Shift + F10，即網頁菜單
    if((event.shiftKey) && (event.keyCode == 121)){
        event.preventDefault();
    }
    // 屏蔽F12
    if(event.keyCode == 123){
        event.preventDefault();
    }
    // 屏蔽Ctrl + Shift + I
    if(event.ctrlKey && event.shiftKey && (event.keyCode == 73)){
        event.preventDefault();
    }
}
// 屏蔽鼠標右鍵
document.addEventListener("contextmenu", function(event){
    event.preventDefault();
},false);

字符編碼charCode屬性：該屬性返回 keypress 事件觸發時按下的字符鍵的字符Unicode值，在其他事件中返回0；該事件已被DOM3廢棄，推薦使用key屬性代替它，但至今，所有瀏覽器都還支持；

txt.addEventListener("keypress", function(event){
    console.log("keyCode：" + event.keyCode);
    console.log("charCode：" + event.charCode); // 兩者值一樣
});

在keypress事件中，keyCode屬性返回值（也是字符編碼，因此它）與charCode一致；

IE8及以下和低版本的opear不支持charCode屬性，它們是在發生keypress事件對象的keyCode中保存Unicode編碼；

另外，某些低版本的瀏覽器在產生非打印字符時也會觸發keypress事件，但此時其charCode值為0，為此可以檢測其charCode屬性值為0的情況；

特別要注意，通過中文輸入法輸入的字符，不會觸發keypress事件，但會觸發keydown及keyup事件，不過，事件對象的charCode為0，而keyCode總是返回229；

跨瀏覽器取得字符編碼，添加到eventutil.js文件中：

    getCharCode: function(event){
        if(typeof event.charCode == "number")
            return event.charCode;
        else
            return event.keyCode;
    }

應用：

EventUtil.addHandler(txtInput, "keypress", function(event){
    event = EventUtil.getEvent(event);
    console.log(EventUtil.getCharCode(event));
});

which屬性：返回一個鍵按下時的字符碼(charCode)，可以發生在keydown、keyup和keypress事件中；如：

var txt = document.getElementById("txt");
txt.addEventListener("keypress", function(event){
    console.log(event.which);
    console.log(event.charCode);
},false);

在keypress事件中，其行為與值與charCode一致，在keydown及keyup事件中可以返回所有鍵的UniCode編碼；

IE8 及其更早版本不支持 which 屬性，不支持的瀏覽器可使用 keyCode 屬性；另外，keyCode屬性在Firefox的onkeypress事件中是無效的，所以，兼容這些瀏覽器可以：

var x = event.which || event.keyCode;

在DOM3事件標準中，已刪除這個屬性了，但所有的瀏覽器都支持該屬性；

示例：

var username = document.getElementById("username");
var userpwd = document.getElementById("userpwd");
username.addEventListener("keydown", function(event){
    var keyCode = event.which ? event.which : event.keyCode;
    if(keyCode == 13)
        userpwd.focus();
});
userpwd.addEventListener("keydown", function(event){
    var keyCode = event.which ? event.which : event.keyCode;
    if(keyCode == 13)
        login();
    else
        return false;
});
function login(){
    console.log("登錄");
}

key屬性：DOM3級事件對鍵盤事件做出了一些改變，刪除了keyCode、charCode和which屬性，增加了新屬性：key，用于獲取鍵名；

console.log(event.key);

key屬性是為了取代keyCode而新增的，它的值就是相應的文本字符（如“a”或“A”），就是鍵名，在按下非字符鍵時，key的值是相應鍵的名（如“Shift”或“Down”）；

示例：驗證一個電話號碼，只接受數字、+、（）、-、ArrowLeft、ArrowRight、Delete或Backspace，如：

txt.addEventListener("keydown", function(event){
    var key = event.key;
    var result = (event.key >= "0" && event.key <= "9") || 
        ["+","(",")","-","ArrowLeft","ArrowRight","Delete","Backspace"].includes(event.key);
    if(!result)
        event.preventDefault();
});

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

<style>
#mouse {display: inline-block;cursor: pointer;margin: 0;}
#mouse:focus {outline: 1px dashed black;}
</style>
<p>單擊選中圖案，并使用方向鍵移動</p>
<pre id="mouse">
_   _
(q\_/p)
/. .\
=\_t_/=   __
/   \   (
((   ))   )
/\) (/\  /
\  Y  /-'
nn^nn
</pre>
<script>
mouse.tabIndex = 0;
mouse.onclick = function() {
    this.style.left = this.getBoundingClientRect().left + 'px';
    this.style.top = this.getBoundingClientRect().top + 'px';
    this.style.position = 'fixed';
};
mouse.onkeydown = function(e) {
    switch (e.key) {
        case 'ArrowLeft':
        this.style.left = parseInt(this.style.left) - this.offsetWidth + 'px';
            return false;
        case 'ArrowUp':
        this.style.top = parseInt(this.style.top) - this.offsetHeight + 'px';
            return false;
        case 'ArrowRight':
        this.style.left = parseInt(this.style.left) + this.offsetWidth + 'px';
            return false;
        case 'ArrowDown':
        this.style.top = parseInt(this.style.top) + this.offsetHeight + 'px';
            return false;
    }
};
</script>

所有瀏覽器都支持key屬性，IE還支持一個char屬性，其作用與key類似，但只有字符鍵才返回值；

Safari和Chrome瀏覽器還為事件對象定義了類似key的keyIdentifier屬性，對于功能鍵，返回“Shift”、“Enter”等，對于可打印字符，返回這個字符的Unicode編碼，如A鍵，值就是“U+0041”；但目前所有瀏覽器都把這個屬性刪除了；

code屬性：代表觸發事件的物理按鍵；

txt.addEventListener("keydown", function(event){
    console.log("key：" + event.key);
    console.log("code：" + event.code);
});

字母鍵返回：“Key<Letter>”，如：“KeyA”，“KeyB”等；數字鍵返回：“Digit<number>”，如：“Digit0”、“Digit1”等；特殊鍵按其名稱編碼：“Enter”、“Backspace”、“Tab”等；

在不同的系統上，其所對應的物理按鈕鍵值有差異，以下以windows為例：

鍵 code值

ESCEscape
數字0-9Digit0-Digit9
Minus"Minus"
Equal"Equal"
Backspace"Backspace"
Tab"Tab"
A-ZKeyA-KeyZ
Bracket"BracketLeft"/"BracketRight"
Enter"Enter"
Control"ControlLeft"/"ControlRight"
Semicolon"Semicolon"
Quote"Quote"
Backquote"Backquote"
Shift"ShiftLeft"/”ShiftRight”
Backslash"Backslash"
Comma"Comma"
Period"Period"
Slash"Slash"
Alt"AltLeft"/”AltRight”
Space"Space"
CapsLock"CapsLock"
F1-F12"F1"-“F12”
Pause"Pause"
ScrollLock"ScrollLock"
PrintScreen"PrintScreen"
Numpad0-9"Numpad0"-“Numpad9”
NumpadSubstract"NumpadSubtract" （減法）
NumpadAdd"NumpadAdd"（加法）
NumpadDecimal"NumpadDecimal"
NumpadMultiply"NumpadMultiply"
IntBackslash"IntlBackslash" （反斜杠，除法）
NumpadEqual"NumpadEqual" （等于）
NumLock"NumLock"
Home"Home"
End"End"
ArrowUp"ArrowUp"
ArrowLeft"ArrowLeft"
ArrowRight"ArrowRight"
ArrowDown"ArrowDown"
PageUp"PageUp"
PageDown"PageDown"
Insert"Insert"
Delete"Delete"
Meta"MetaLeft"/ “MetaRight
ContextMenu"ContextMenu"
Power"Power"
BrowserSearch"BrowserSearch"
BrowserFavorites "BrowserFavorites"
BrowserRefresh "BrowserRefresh"
BrowserStop "BrowserStop"
BrowserForward "BrowserForward"
BrowserBack "BrowserBack"
LaunchApp1LaunchApp1"
LaunchMail “LaunchMail"

另外，針對輸入法輸入，key屬性是識別不了的，其會返回“Process“，而code屬性返回還是其物理鍵碼；

不同的語言，key值是不同的，但code是一樣的；如：

document.addEventListener("keydown", function(event){
    if(event.code == "KeyZ" &&(event.ctrlKey || event.metaKey)){
        console.log("Undo");
    }
},false)

示例：用鍵盤控制一個元素：結構與樣式：

<style>
.world{margin:0;padding:0;background-color:black;width:400px;height:400px;}
#spaceship{fill:orange; stroke:red;stroke-width:2px;}
</style>
<svg class="world">
    <polygon id="spaceship" points="15,0 0,30 30,30" />
</svg>
<script>
    refresh();
</script>
<script>
var shipSize = {width:30, height:30};
var position = {x:200, y:200};
var moveRate = 9, turnRate = 5, angle = 0;
var spaceship = document.getElementById("spaceship");
function updatePosition(offset){
    var rad = angle * (Math.PI / 180);
    position.x += (Math.sin(rad) * offset);
    position.y -= (Math.cos(rad) * offset);
    if(position.x < 0)
        position.x = 399;
    else if(position.x > 399)
        position.x = 0;
    
    if(position.y < 0)
        position.y = 399;
    else if(position.y > 399)
        position.y = 0;
}
function refresh(){
    var x = position.x - (shipSize.width / 2);
    var y = position.y - (shipSize.height / 2);
    var transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15 " + ")";
    spaceship.setAttribute("transform", transform);
}
</script>

應用：

window.addEventListener("keydown", function(event){
    if(event.preventDefaulted)
        return;
    switch(event.code){
        case "KeyS":
        case "ArrowDown":
            updatePosition(-moveRate);
            break;
        case "KeyW":
        case "ArrowUp":
            updatePosition(moveRate);
            break;
        case "KeyA":
        case "ArrowLeft":
            angle -= turnRate;
            break;
        case "KeyD":
        case "ArrowRight":
            angle += turnRate;
            break;
    }
    refresh();
    event.preventDefault();  // 這樣它就不會被處理兩次
}, true);
refresh();

repeat屬性：是一個只讀屬性，返回一個布爾值，如果按鍵被一直按住，返回值為true

txt.addEventListener("keydown", function(event){
    console.log(event.repeat);
},false);

輔助鍵：鍵盤事件對象也支持輔助鍵，有altKey、ctrlKey、shiftKey和metaKey屬性（與鼠標事件的輔助鍵一樣）：

function handlerEvent(event){
    var txt = document.getElementById("txt");
    event = event || window.event;
    txt.value += "\n" + event.type;
    txt.value += "\nkeyCode:" + event.keyCode;
    txt.value += "\ncharCode:" + event.charCode;
    var arrKeys = [];
    if(event.shiftKey) arrKeys.push("shift");
    if(event.altKey) arrKeys.push("alt");
    if(event.ctrlKey) arrKeys.push("ctrl");
    txt.value += "\n按鈕：" + arrKeys; 
}

getModifierState()方法：

DOM3級還為event對象添加了getModifierState()方法，該方法接收一個參數，即等于Shift、Control、AltGraph或Meta的字符串，表示要檢測的輔助鍵，如果指定的輔助鍵是活動的，該方法返回true，否則返回false；

if(event.getModifierState){
    console.log(event.getModifierState("Shift"));
}

通過event對象的shiftKey、altKey、ctrlKey和metaKey屬性也可以取得類似的屬性；IE8及以下不支持此方法；

location屬性：DOM3級事件添加了一個名為location的屬性，返回一個long型的常量值，表示按下了什么位置的鍵：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被廢棄了）

console.log(event.location);

location屬性可用于keydown和keyup事件，但不能用于keypress事件；IE8及以下和其他低版本的瀏覽器不支持location屬性；低版本的Chrome還支持一個keyLocation等價屬性，但該值除了按下數字鍵盤返回3，其他都返回0，該屬性現已廢棄；

示例：鍵盤快捷鍵的Keymap類：說明：把像PageUp、Alt_Z和ctrl+alt+shift+F5這些按鍵的標識符映射到Javascript函數，這些函數會作為按鍵的響應而調用；以javascript對象的形式把按鍵的綁定傳給Keymap()構造函數，在對象中屬性名是按鍵標識符，而屬性值是處理程序函數；使用bind()和unbing()方法添加和移除綁定，使用install()方法在HTML元素（通常是document對象）上配置Keymap；通過在元素上注冊keydown事件處理程序配置Keymap；每次鍵被按下，處理程序檢查是否有與按鍵相關的函數，如果有，則調用它；在keydown事件處理程序中如果能使用DOM3級事件的key屬性就優先使用它，如果沒有，會查找Webkit的keyIdentifier屬性然后使用它，否則，使用keyCode屬性；保存為Keymmap.js；如：

// 構造函數
function Keymap(bindings){
    this.map = {}; // 定義按鍵標識符->處理程序映射
    if(bindings){  // 給它復制初始綁定
        for(name in bindings)
        this.bind(name, bindings[name]);
    }
}
// 綁定指定的按鍵標識符和指定的處理程序
Keymap.prototype.bind = function(key, func){
    this.map[Keymap.normalize(key)] = func;
};
// 刪除指定按鍵標識符的綁定
Keymap.prototype.unbind = function(key){
    delete this.map[Keymap.normalize(key)];
};
// 在指定HTML元素上配置Keymap
Keymap.prototype.install = function(element){
    // 這是事件處理程序
    var keymap = this;
    function handler(event){
        // console.log(event);
        return keymap.dispatch(event, element);
    }
    // 安裝
    if(element.addEventListener)
        element.addEventListener("keydown", handler, false);
    else if(element.attachEvent)
        element.attachEvent("onkeydown", handler);
}
// 基于Keymap綁定分派按鍵事件
Keymap.prototype.dispatch = function(event, element){
    // 開始沒有輔助鍵和鍵名
    var modifiers = "";
    var keyname = null;
    // 按照標準的小寫字母順序構建輔助鍵字符串
    if(event.altKey) modifiers += "alt_";
    if(event.ctrlKey) modifiers += "ctrl_";
    if(event.metaKey) modifiers += "meta_";
    if(event.shiftKey) modifiers += "shift_";
    // 如果實現DOM3級規范的key屬性，獲取keyname很容易
    if(event.key) keyname = event.key;
    // 在Safari和Chrome上用keyIdentifier獲取功能鍵鍵名
    else if(event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+")
        keyname = event.keyIdentifier;
    // 否則，使用keyCode屬性和后面編碼到鍵名的映射
    else keyname = Keymap.keyCodeToKeyName[event.keyCode];
    // 如果不能找出鍵名，只能返回并忽略這個事件
    if(!keyname) return;
    // 標準的按鍵id是輔助鍵加上小寫的鍵名
    var keyid = modifiers + keyname.toLowerCase();
    // 現在查看按鍵標識符是否綁定了任何東西
    var handler = this.map[keyid];
    if(handler){ // 如果這個鍵有處理程序，則調用
        // 調用處理程序
        var retval = handler.call(element, event, keyid);
        // 如果處理程序返回false，取消默認行為并阻止冒泡
        if(retval === false){
            if(event.stopPropagation)
                event.stopPropagation();
            else
                event.cancelBubble = true;
            if(event.preventDefault)
                event.preventDefault();
            else
                event.returnValue = false;
        }
        return retval;  // 返回處理程序的返回值
    }
};
// 用于把的按鍵標識符轉換成標準形式的工具函數
// 在非Mac，把meta映射到ctrl
// 在Mac，把"Meta+C"變成"Command+C"，其他都是"Ctrl+C"
Keymap.normalize = function(keyid){
    keyid = keyid.toLowerCase();
    var words = keyid.split(/\s+|[\-+_]/);  // 分割輔助鍵和鍵名
    var keyname = words.pop(); // 鍵名是最后一個
    keyname = Keymap.aliases[keyname] || keyname; // 它是別名嗎？
    words.sort();  // 排序剩下的輔助鍵
    words.push(keyname);  // 添加到序列化名字后面
    return words.join("_");  // 拼接并返回
};
// 把按鍵的常見別名映射到它們的正式名
Keymap.aliases = {
    "escape": "esc", // 鍵名使用DOM3級事件的定義和后面的編碼到鍵名的映射
    "delete": "del", // 所有的鍵和值都必須小寫
    "return": "enter",
    "ctrl": "control",
    "space": "spacebar",
    "ins": "insert"
};
Keymap.keyCodeToKeyName = {
    // 使用詞或方向鍵的按鍵
    8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Control", 18: "Alt",
    19: "Pause", 20: "CapsLock", 27: "Esc", 32: "Spacebar", 33: "PageUp",
    34: "PageDown", 35: "End", 36: "Home", 37: "Left", 38: "Up", 39: "Right",
    40: "Down", 45: "Insert", 46: "Del",
    // 主鍵盤（非數字小鍵盤）上的數字鍵
    48: "0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8",57:"9",
    // 字母按鍵，注意不區分大小寫
    65:"A",66:"B",67:"C",68:"D",69:"E",70:"F",71:"G",72:"H",73:"I",
    74:"J",75:"K",76:"L",77:"M",78:"N",79:"O",80:"P",81:"Q",82:"R",
    83:"S",84:"T",85:"U",86:"V",87:"W",88:"X",89:"Y",90:"Z",
    // 數字小鍵盤的數字和標點符號按鍵
    96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103:"7",104:"8",105:"9",
    106:"Multiply",107:"Add",109:"Subtract",110:"Decimal",111:"Divide",
    112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",
    118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",
    124:"F13",125:"F14",126:"F15",127:"F16",128:"F17",129:"F18",
    130:"F19",131:"F20",132:"F21",133:"F22",134:"F23",135:"F24",
    59:";",61:"=",186:";",187:"=", 
    188:",",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"
};

應用：

<textarea id="txt"></textarea>
<script>
function fnPageUp(){
    console.log("pageup");
    return false; 
}
function fnArrowUp(){
    console.log("arrowup");
}
function fnEnter(){
    console.log("enter");
    return false;
}
var obj = {"PageUp":fnPageUp, "ArrowUp":fnArrowUp, "Enter": fnEnter};
var km = new Keymap(obj);
var txt = document.getElementById("txt");
km.install(txt);
</script>

文本事件：

文本類事件，只有一個textinput，當在可編輯區域中輸入字符時，會觸發此事件；

var txt = document.getElementById("txt");
txt.addEventListener("textinput", function(event){
    console.log(event);   // TextEvent
});

但只有IE支持，其他所有瀏覽器都不支持；但卻存在一個不標準的textInput事件，注意Input的第一個字母是大寫；

txt.addEventListener("textInput", function(event){
    console.log(event);  // TextEvent
});

但除了Webkit瀏覽器支持，IE和Firefox不支持textInput事件；

該事件是對keypress的補充，用意是在將文本顯示給用戶之前攔截文本，也就是在文本插入文本框之前會觸發textinput事件；

但是兩者有些不同：

任何可以獲得焦點的元素都可以觸發keypress事件，但只有可編輯元素才能觸發textinput事件；

textinput事件只會在用戶按下能夠輸入實際字符的鍵時才會被觸發，而keypress事件則在按下那些能夠影響文本顯示的鍵時也會觸發（如退格鍵）；

textinput事件event對象還包含一個data屬性，其值就是輸入的字符；

EventUtil.addHandler(txtInput, "textinput", function(event){
    event = EventUtil.getEvent(event);
    console.log(event.data);
});

另外，textinput是先于keyup、后于keypress觸發，如果在keypress事件中阻止了默認行為，那么textinput事件就有可能不會被觸發了，如：

txt.addEventListener("textInput", function(event){
    console.log(event.type);
});
txt.addEventListener("textinput", function(event){
    console.log(event.type);
});
txt.addEventListener("keypress", function(event){
    console.log(event.type);
    event.preventDefault();
})；

textinput事件不是鍵盤的特定事件，無論通過鍵盤、剪切和粘貼、拖放等方式，每當發生文本輸入時就會觸發它；

event對象的inputMethod屬性是一組常量值，表示文本輸入的方式（也就是所謂的輸入源），如：0表示瀏覽器不確定是怎么輸入的、1表示是使用鍵盤輸入、2表示是粘貼進來的、3表示是拖放進來的、4表示是使用IME輸入的、5表示是通過在表單中選擇某一項輸入的、6表示是通過手寫輸入的、7表示是通過語音輸入的、8表示是通過幾種方法組合輸入的、9表示是通過腳本輸入的；

通過這個屬性可以確定文本是如何輸入到控件中的，但只有IE支持inputMethod屬性；

對于鍵盤輸入，data屬性通常只保存單個字符，但其他輸入源通常可能包含多個字符；對于keypress事件來說，一個keypress事件表示輸入的單個字符，其使用keyCode或charCoode屬性來保存的，返回的是對應的Unicode編碼，因此需要使用String.fromCharCode()方法進行轉換，如：

var txt = document.getElementById("txt");
txt.addEventListener("textInput", function(event){
    console.log("textInput:" + event.data);
});
txt.addEventListener("keypress", function(event){
    console.log("keypress:" + String.fromCharCode(event.charCode));
});

可以通過取消textinput、textInput和keypress事件來阻止字符輸入，這意味著可以使用這些事件來過濾輸入，如：過濾用戶輸入，保存為InputFilter.js

// HTML代碼示例
// 郵政編碼：<input id="zip" type="text" data-allowed-chars="0123456789"
//             data-messageid="zipwarn" />
// <span id="zipwarn" style="color:red; visibility:hidden">只支持數字</span>
function inputfilter(){
    console.log("filter");
    // 查找所有<input>元素
    var inputelts = document.getElementsByTagName("input");
    for(var i=0, len = inputelts.length; i<len; i++){
        var elt = inputelts[i];
        // 跳過不是文本域或沒有data-allowed-chars屬性的元素
        if(elt.type != "text" || !elt.getAttribute("data-allowed-chars"))
            continue;
        // 在input元素上注冊事件處理程序
        if(elt.addEventListener){
            elt.addEventListener("keypress", filter, false);
            elt.addEventListener("textInput", filter, false);
            elt.addEventListener("textinput", filter, false);
        }else{
            elt.attachEvent("onkeypress", filter);
        }
    }
    // 處理程序
    function filter(event){
        var e = event || window.event;
        var target = e.target || e.srcElement;
        var text = null;  // 輸入的文本
        // 獲取輸入的字符或文本
        if(e.type === "textinput" || e.type==="textInput" )
            text = e.data;
        else{
            var code = e.charCode || e.keyCode;
            // 如果按下的是功能鍵，不要過濾
            if(code < 32 ||  // ASCII控制字符
                e.charCode == 0 || // Firefox的功能鍵
                e.ctrKey || e.altKey)  // 輔助鍵
                return;
            text = String.fromCharCode(code);
        }
        var allowed = target.getAttribute("data-allowed-chars"); // 合法字符
        var messageid = target.getAttribute("data-messageid");  // 信息元素id
        if(messageid)
            var messageElement = document.getElementById(messageid);
        for(var i=0, len=text.length; i<len; i++){
            var c = text.charAt(i);
            if(allowed.indexOf(c) == -1){
                if(messageElement)
                    messageElement.style.visibility = "visible";
                if(e.preventDefault)
                    e.preventDefault();
                if(e.returnValue)
                    e.returnValue = false;
                return false;
            }
        }
        if(messageElement)
            messageElement.style.visibility = "hidden";
    }
};

應用：

<p><input id="zip" type="text" data-allowed-chars="0123456789"
           data-messageid="zipwarn" />
<span id="zipwarn" style="color:red; visibility:hidden">只支持數字</span></p>
<script>
window.onload = function(){
    inputfilter();
}
</script>

InputEvent事件：

InputEvent類用來構造和字符輸入相關的事件對象；

input事件：

當一個 <input>、<select>或<textarea>元素的 value 被修改時，就會觸發 input事件；如：
txt.addEventListener("input", function(event){
    console.log(event);  // InputEvent
});

另外，可編輯元素也可添加input事件；

keypress和textinput事件是在新輸入的文本真正插入到可編輯區域元素前觸發的，所以能夠在事件處理程序中取消事件或阻止文本插入；而input事件，其是在文本插入后才觸發事件，因此，這個事件不能取消，不能指定其事件對象中的最新文本；如：

姓名：<input type="text" oninput="this.value = this.value.toUpperCase();" />

該事件和文本事件一樣，擁有data和isComposing屬性；

data屬性：只讀，返回當前輸入的字符串，如果是刪除操作，則該值為空字符串；

isComposing屬性：只讀，返回一個布爾值，表明該事件是在觸發compositionstart事件之后且觸發 compositionend事件之前觸發的，也就是表明當前輸入的字符是輸入法的輸入的；

txt.addEventListener("input", function(event){
    console.log(event.data);
    console.log(event.isComposing);
});

如果更改未插入文本（例如刪除字符時），則其可能為空字符串；

inputType屬性：表示當前編輯文本的類型，如果是插入文本，值為insertText，如果是Delete刪除字符，值為ddeleContentForward，如果是Backspace刪除字符，值為deleteContentBackward，如果剪切文本，值為deleteByCut，如果是回車換行，值為insertLineBreak，如果是粘貼輸入，值為insertFromPaste，如果是拖入，值為insertFromDrop；

IE雖然支持input事件，但是把它當作普通的Event類型的，因此，它沒有data和isComposing屬性；

IE8及以下不支持該事件，其提供了一個專用的propertychange事件，可以用來檢測文本輸入元素的value屬性的變化；

如：跨平臺：

function forceToUpperCase(element){
    if(typeof element === "string")
        element = document.getElementById(element);
    element.oninput = upcase;
    element.onpropertychange = upcaseOnPropertyChange;
    function upcase(event){
        this.value = this.value.toUpperCase();
    }
    function upcaseOnPropertyChange(event){
        var e = event || window.event;
        if(e.propertyName === "value"){
            // 移除事件處理程序，避免循環調用
            this.onpropertychange = null;
            this.value = this.value.toUpperCase();
            // 再恢復原來的propertychange處理程序
            this.onpropertychange = upcaseOnPropertyChange;
        }
    }
}
forceToUpperCase(document.getElementById("username"));

beforeinput事件：beforeinput 在<input>, <select> 或 <textarea> 的值即將被修改前觸發，這個事件也可以在 contenteditable 被設置為 true 的元素和打開 designMode 后的任何元素上被觸發；

var txt = document.getElementById("txt");
txt.addEventListener("beforeinput", function(event){
    console.log(event.type);
});
txt.addEventListener("input", function(event){
    console.log(event.type);
});

該事件是可以取消的，如果取消，input事件就不會被觸發；

change事件：當用戶更改<input>、<select>和<textarea>元素的值并提交這個更改時，change事件就是觸發；和 input事件不一樣的是，change事件并不是每次元素的value改變時都會觸發；

該事件不可被取消；該事件屬于Event類；

在線咨詢

上一篇：產品經理懂點技術：前后端是如何“分家”的？
下一篇：程序員應該先學哪種編程語言？-答案不是PHP

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript 鍵盤事件實例

您的項目需求