`
sisi1984117
  • 浏览: 155651 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

【转】判断JS键盘事件

EXTIEJavaScriptCSSUP 
阅读更多 
  http://quicker.iteye.com/blog/576291

    

<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>   
<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> 

 

对    evt = (evt) ? evt : window.event 的解释：

这段代码是为了能在IE和FF下通用取得event对象的。   
  window.event是IE下的写法   
  FF下不能直接取，只能从参数传过来，evt就是event对象，如：onclick="foo(event)"

 

分享到：
| 【原】全页面监听
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript键盘响应事件

    一、原生JavaScript键盘事件 1. `keydown`事件：当用户按下键盘上的一个键时触发。 2. `keyup`事件：当用户释放键盘上的一个键时触发。 3. `keypress`事件：对于可打印字符，此事件在`keydown`之后、`keyup`之前...

    js键盘事件全面控制_兼容FireFox和IE

    在实现 JS 键盘事件时，需要判断浏览器类型，以便选择正确的事件对象属性。可以使用 navigator.userAgent 属性来判断浏览器类型，例如： ``` if (navigator.userAgent.indexOf("Firefox") != -1) { // FireFox ...

    js键盘事件

    ### JS键盘事件详解 在JavaScript编程中，键盘事件是非常重要的交互元素之一，它们允许开发者捕捉用户的键盘输入行为，并根据这些输入执行相应的操作。本文将详细解释JS中的键盘事件及其应用场景。 #### 一、键盘...

    使用JS监听键盘按下事件（keydown event）

    JavaScript作为网页开发的主要脚本语言，提供了多种方式来监听键盘事件。本文将详细介绍如何使用JavaScript来监听键盘按下事件（keydown event），并结合示例代码来说明如何实现。 首先，我们需要了解JavaScript中...

    js判断+ 键盘

    这篇博客“js判断+ 键盘”可能是探讨如何利用JavaScript来监听和处理键盘事件，以及进行条件判断的相关技术。 首先，让我们了解一下JavaScript中的键盘事件。在浏览器环境中，JavaScript提供了`keydown`、`keyup`和...

    jquery 监听 键盘 事件

    其中，监听键盘事件是常见的用户交互处理之一。本文将深入探讨如何使用jQuery来监听键盘事件，以及相关的应用场景和技巧。 ### 1. jQuery键盘事件绑定 jQuery提供了`.on()`方法来绑定事件，包括键盘事件。键盘事件...

    浅谈js键盘事件全面控制

    今天，我们就来深入探讨JavaScript（js）中如何对键盘事件进行全面的控制，包括不同浏览器之间的兼容性处理以及代码实现和优化。 首先，我们需要明确浏览器中与键盘事件相关的主要类型，它们分别是keydown、...

    asp.net控制键盘keycode事件

    尽管ASP.NET主要是服务器端的编程框架，但可以通过嵌入JavaScript代码或者引用外部JS文件来处理客户端的键盘事件。以下是一个简单的例子，展示如何在HTML输入框中监听`keydown`事件： ```html ...

    javascript键盘事件[定义].pdf

    JavaScript 键盘事件是网页开发中的重要组成部分，用于监听用户在键盘上按下、释放按键的行为。在本文中，我们将深入探讨浏览器的键盘事件、兼容性问题以及如何在不同浏览器中实现键盘事件监听。 首先，浏览器的...

    javascript键盘事件全面控制脚本代码.docx

    ### JavaScript键盘事件全面控制脚本知识点解析 #### 一、概述 在JavaScript中，通过键盘事件可以捕捉用户的键盘输入行为，这对于开发具有交互性的Web应用至关重要。本文将深入探讨如何利用JavaScript来全面控制...

    判断扫描枪还是键盘输入

    在IT领域，尤其是在开发涉及用户输入的...总之，判断扫描枪还是键盘输入需要结合事件监听和数据特性，这在Delphi或类似环境中可以通过处理键盘事件和分析输入字符串来实现。具体实现方式取决于项目的架构和编程语言。

    JavaScript 操作键盘的Enter事件（键盘任何事件），兼容多浏览器.docx

    在 JavaScript 中，我们可以使用 onkeydown、onkeyup、onkeypress 等事件处理程序来捕获键盘事件。 二、如何使用 JavaScript 操作键盘的 Enter 事件？ 要使用 JavaScript 操作键盘的 Enter 事件，需要使用 ...

    js键盘事件参考学习_兼容FireFox和IE

    【JavaScript 键盘事件详解与兼容性处理】 在JavaScript中，键盘事件是我们处理用户通过键盘输入的重要手段。本文将深入探讨浏览器的键盘事件、兼容性问题以及如何在Firefox和IE中实现代码，最后进行总结。 **第一...

    js回车事件判断

    在探讨“js回车事件判断”这一主题时，我们首先需要理解JavaScript中如何捕捉和响应键盘事件，尤其是回车键的触发。JavaScript提供了强大的事件处理机制，使得开发者能够精细地控制用户与网页的交互方式。当涉及到...

    Atitit.js的键盘按键事件捆绑and事件调度

    Atitit.js的键盘按键事件捆绑和事件调度主要涉及如何在JavaScript中处理键盘事件，包括对按键进行绑定和调度。这种方法对于开发具有良好交互性的Web应用程序至关重要。在这一部分，我们会详细探讨相关的知识点。 ...

    特殊-JS实现键盘效果-客户端键盘

    通过JavaScript，我们可以监听键盘事件，控制页面元素的行为，甚至创建自定义的虚拟键盘。 一、键盘事件 1. `keydown`：当用户按下键盘上的一个键时，这个事件被触发。它提供了有关按键的信息，如`event.keyCode`...

Magicbox
Global site tag (gtag.js) - Google Analytics