键盘事件包括:
1. 输入事件(Input)——当<input>或<textarea>元素的值发生变化时触发
2. 任意键被按下事件(keydown)——当用户按下键盘的任意一个键时触发(按住不放,此事件会不断被触发)
3. 可打印键(参考下文注释)被按下事件(keypress)——当用户按下一个键并在屏幕上显示一个字符时触发(按住不放,此事件会不断被触发)
4. 松开按键事件(keyup)——当用户松开键盘上的任意一个键时触发
注:
键盘中的键分为字符(可打印)键和功能键(不可打印),
系统功能键
包括如下:
Esc、Tab、Caps Lock、Shift、Ctrl、Alt、
Enter、
Backspace、
Print Screen、Scroll Lock、Pause Break、Insert、Delete、
Home、
End、Page Up、Page Down,
F1 through F12,Num Lock、T
he Arrow Keys。
代码示例:实时显示文本框可输入的字数以及最后一个按键的keyCode(键码值)
显示效果:
JS代码如下:
// This example has been updated to fire on the keyup event instead of keypress
// (on the last line in the event listener) as new text is not in the textarea until the key is released
var el; // Declare variables
function charCount(e) { // Declare function
var textEntered, charDisplay, counter, lastkey; // Declare variables
textEntered = document.getElementById('message').value; // User's text
charDisplay = document.getElementById('charactersLeft'); // Counter element
counter = (180 - (textEntered.length)); // Num of chars left
charDisplay.textContent = counter; // Show chars left
lastkey = document.getElementById('lastKey'); // Get last key elem
lastkey.textContent = 'Last key in ASCII code: ' + e.keyCode; // Create msg
}
el = document.getElementById('message'); // Get msg element
el.addEventListener('keyup', charCount, false); // on keyup - call charCount()
HTML代码如下:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript & jQuery - Chapter 6: Events - Keypress</title>
<link rel="stylesheet" href="css/c06.css" />
</head>
<body>
<div id="page">
<h1>List King</h1>
<form id="messageForm">
<h2>My profile</h2>
<textarea id="message"></textarea>
<div id="charactersLeft">180 characters</div>
<div id="lastKey"></div>
</form>
</div>
<script src="js/keypress.js"></script>
</body>
</html>
CSS代码:(请参考:源码-JavaScript&jQuery交互式前端开发-第6章-事件-Focus和blur事件,http://blog.csdn.net/hpdlzu80100/article/details/52651002)
总之,这个示例还是相当有意思的!