<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>键盘事件全面控制 - 扮靓吧时尚女生论坛www.mei828.cn </title>
<STYLE TYPE="text/css">
TD {text-align:center}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function init() {
document.onkeydown = showKeyDown
document.onkeyup = showKeyUp
document.onkeypress = showKeyPress
}
function showKeyDown(evt) {
evt = (evt) ? evt : window.event
document.getElementById("pressKeyCode").innerHTML = 0
document.getElementById("upKeyCode").innerHTML = 0
document.getElementById("pressCharCode").innerHTML = 0
document.getElementById("upCharCode").innerHTML = 0
restoreModifiers("")
restoreModifiers("Down")
restoreModifiers("Up")
document.getElementById("downKeyCode").innerHTML = evt.keyCode
if (evt.charCode) {
document.getElementById("downCharCode").innerHTML = evt.charCode
}
showModifiers("Down", evt)
}
function showKeyUp(evt) {
evt = (evt) ? evt : window.event
document.getElementById("upKeyCode").innerHTML = evt.keyCode
if (evt.charCode) {
document.getElementById("upCharCode").innerHTML = evt.charCode
}
showModifiers("Up", evt)
return false
}
function showKeyPress(evt) {
evt = (evt) ? evt : window.event
document.getElementById("pressKeyCode").innerHTML = evt.keyCode
if (evt.charCode) {
document.getElementById("pressCharCode").innerHTML = evt.charCode
}
showModifiers("", evt)
return false
}
function showModifiers(ext, evt) {
restoreModifiers(ext)
if (evt.shiftKey) {
document.getElementById("shift" + ext).style.backgroundColor = "#ff0000"
}
if (evt.ctrlKey) {
document.getElementById("ctrl" + ext).style.backgroundColor = "#00ff00"
}
if (evt.altKey) {
document.getElementById("alt" + ext).style.backgroundColor = "#0000ff"
}
}
function restoreModifiers(ext) {
document.getElementById("shift" + ext).style.backgroundColor = "#ffffff"
document.getElementById("ctrl" + ext).style.backgroundColor = "#ffffff"
document.getElementById("alt" + ext).style.backgroundColor = "#ffffff"
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Keyboard Event Handler Lab</H1>
<HR>
<FORM>
<TABLE BORDER=2 CELLPADDING=2>
<TR><TH></TH><TH>onKeyDown</TH><TH>onKeyPress</TH><TH>onKeyUp</TH></TR>
<TR><TH>Key Codes</TH>
<TD ID="downKeyCode">0</TD>
<TD ID="pressKeyCode">0</TD>
<TD ID="upKeyCode">0</TD>
</TR>
<TR><TH>Char Codes (IE5/Mac; NN6)</TH>
<TD ID="downCharCode">0</TD>
<TD ID="pressCharCode">0</TD>
<TD ID="upCharCode">0</TD>
</TR>
<TR><TH ROWSPAN=3>Modifier Keys</TH>
<TD><SPAN ID="shiftDown">Shift</SPAN></TD>
<TD><SPAN ID="shift">Shift</SPAN></TD>
<TD><SPAN ID="shiftUp">Shift</SPAN></TD>
</TR>
<TR>
<TD><SPAN ID="ctrlDown">Ctrl</SPAN></TD>
<TD><SPAN ID="ctrl">Ctrl</SPAN></TD>
<TD><SPAN ID="ctrlUp">Ctrl</SPAN></TD>
</TR>
<TR>
<TD><SPAN ID="altDown">Alt</SPAN></TD>
<TD><SPAN ID="alt">Alt</SPAN></TD>
<TD><SPAN ID="altUp">Alt</SPAN></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
分享到：
相关推荐
浏览器的按键事件 在浏览器中，键盘事件可以分为三种类型： * keydown：在用户按下键盘上的某个键时触发该事件。 * keypress：在用户按下键盘上的某个键时，如果该键可以输入字符，例如字母或数字等，则触发该事件...
然后，通过JavaScript来监听键盘事件，根据用户的按键输入来控制人物的图像变化，从而实现行走或跳跃的动作。 示例代码如下所示： ```html <!DOCTYPE html> <title>JS Keyboard Events for Character Movement...
### JS键盘事件详解 在JavaScript编程中，键盘事件是非常重要的交互元素之一，它们允许开发者捕捉用户的键盘输入行为，并根据这些输入执行相应的操作。本文将详细解释JS中的键盘事件及其应用场景。 #### 一、键盘...
一、原生JavaScript键盘事件 1. `keydown`事件：当用户按下键盘上的一个键时触发。 2. `keyup`事件：当用户释放键盘上的一个键时触发。 3. `keypress`事件：对于可打印字符，此事件在`keydown`之后、`keyup`之前...
今天，我们就来深入探讨JavaScript（js）中如何对键盘事件进行全面的控制，包括不同浏览器之间的兼容性处理以及代码实现和优化。 首先，我们需要明确浏览器中与键盘事件相关的主要类型，它们分别是keydown、...
这篇名为“javascript键盘事件管理工具”的博文可能探讨了一种结构化和可扩展的方式来管理和处理键盘事件。这样的工具通常会提供一个中心化的注册系统，允许开发者注册和管理不同的键盘事件和相应的回调函数。这样做...
在本文中，我们将深入探讨JavaScript键盘事件的测试总结，主要关注各种浏览器（如IE、Firefox、Safari和Opera）中的行为差异。 首先，键盘事件包括`keydown`、`keypress`、`input`和`keyup`。当用户按下键盘上的键...
**第一部分：浏览器的按键事件** 键盘事件包括三种类型：`keydown`、`keypress`和`keyup`。`keydown`事件在用户按下键盘键时触发，`keyup`事件在用户释放键盘键时触发，而`keypress`事件则在用户按下可打印字符（如...
### JavaScript键盘事件全面控制脚本知识点解析 #### 一、概述 在JavaScript中，通过键盘事件可以捕捉用户的键盘输入行为，这对于开发具有交互性的Web应用至关重要。本文将深入探讨如何利用JavaScript来全面控制...
JavaScript 键盘事件是网页开发中的重要组成部分，用于监听用户在键盘上按下、释放按键的行为。在本文中，我们将深入探讨浏览器的键盘事件、兼容性问题以及如何在不同浏览器中实现键盘事件监听。 首先，浏览器的...
### JavaScript中的键盘事件详解 #### 一、概述 在JavaScript中，键盘事件是与用户键盘输入相关的事件。这些事件主要用于捕获用户的键盘操作，并根据不同的按键执行相应的逻辑处理。本篇文章将详细介绍`onkeypress...
javascript键盘事件大全，最全的键盘事件event.keycode
键盘事件全面控制，html，查看按键值 key, 键盘上对应的值
JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例...
其中，keydown事件在用户按下键盘上的任意键时触发，keypress事件在按键被按下并产生字符时触发，keyup事件则在键盘键被释放时触发。本文主要关注keydown事件的监听。 要监听全局的键盘按下事件，可以使用jQuery中...
"JS键盘事件_寒风.htm"可能是一个关于JavaScript键盘事件的教程，帮助理解如何处理键盘输入。其他文件如"AP1.0-应用平台API参考手册-V1.0.doc"和"prototype_百度百科.htm"可能是关于JavaScript API和其他相关技术的...
NULL 博文链接：https://mzl-2011.iteye.com/blog/1178769
在JavaScript中，事件（Events）是用户或浏览器与页面交互时触发的特定动作，比如点击按钮、按下键盘上的键或者移动鼠标。本文将详细介绍如何使用JavaScript处理HTML事件、键盘事件和鼠标事件。 ### HTML事件处理 ...
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]不过并不止提交按钮会激发form的submit事件，连同上面的归纳如下： 1. 如果表单里有一个type=”submit”的按钮，回车键生效。 2. 如果表单里只有一个type=”te
Javascript检测键盘事件代码，非常经典。希望大家下载