`
rmzdb
  • 浏览: 81304 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

【原】JS事件机制--键盘实例

 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>js 按键记录</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="羽殇仁">
<META NAME="Keywords" CONTENT="js 按键记录">
<META NAME="Description" CONTENT="js 按键记录">
</HEAD>
<BODY>
<script type="text/javascript">
var keystring = "";//记录按键的字符串
function $(s){return document.getElementById(s)?document.getElementById(s):s;}
function keypress(e)
{
  var currKey=0,CapsLock=0,e=e||event;
    currKey=e.keyCode||e.which||e.charCode;
  CapsLock=currKey>=65&&currKey<=90;
  switch(currKey)
  {
       //屏蔽了退格、制表、回车、空格、方向键、删除键
       case 8: case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46:keyName = "";break;
       default:keyName = String.fromCharCode(currKey); break;
  }
  keystring += keyName;
}
function keydown(e)
{
  var e=e||event;
  var currKey=e.keyCode||e.which||e.charCode;
  if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
  {
      switch(currKey)
       {
          case 8: keyName = "[退格]"; break;
          case 9: keyName = "[制表]"; break;
          case 13:keyName = "[回车]"; break;
          case 32:keyName = "[空格]"; break;
          case 33:keyName = "[PageUp]";   break;
          case 34:keyName = "[PageDown]";   break;
          case 35:keyName = "[End]";   break;
          case 36:keyName = "[Home]";   break;
          case 37:keyName = "[方向键左]";   break;
          case 38:keyName = "[方向键上]";   break;
          case 39:keyName = "[方向键右]";   break;
          case 40:keyName = "[方向键下]";   break;
          case 46:keyName = "[删除]";   break;
          default:keyName = "";    break;
      }
      keystring += keyName;
  }
  $("content").innerHTML=keystring;
}
function keyup(e)
{
  $("content").innerHTML=keystring;
}
document.onkeypress=keypress;
document.onkeydown =keydown;
document.onkeyup =keyup;
</script>
<input type="text" />
<input type="button" value="清空记录" onclick="$('content').innerHTML = '';keystring = '';"/>
<br/>请按下任意键查看键盘响应键值:<span id="content"></span>
</BODY>
</HTML>
分享到:
评论

相关推荐

    javascript实例应用---游戏类.rar

    1. **事件处理**:JavaScript通过监听用户的键盘、鼠标等输入,实时响应游戏中的各种操作。例如,玩家移动角色、点击按钮、触发游戏事件等,都离不开JavaScript的事件处理机制。 2. **动画与游戏循环**:JavaScript...

    计算机软件-商业源码-实例123 截取键盘信息.zip

    标题中的“计算机软件-商业源码-实例123 截取键盘信息.zip”表明这是一个包含商业源码...对于学习者来说,通过研究这个实例,可以深入理解键盘事件处理机制,同时也能意识到软件开发中对用户隐私的尊重和保护的重要性。

    js实例大全 js实例

    本"JS实例大全"聚焦于展示JavaScript在实际应用中的各种功能和技巧,帮助开发者更好地理解和掌握这门语言。 一、基础语法与数据类型 JavaScript的基础语法包括变量声明(var、let、const)、数据类型(如字符串、...

    java-applet屏蔽键盘资料+例子打包下载

    在这个主题中,"java-applet屏蔽键盘资料+例子打包下载" 提供的是关于如何在Java Applet中阻止用户键盘输入的教程和实例。这个压缩包可能包含了源代码、说明文档或者演示程序,用于帮助开发者学习和理解这一技术。 ...

    vue数字虚拟键盘组件

    3. **数据双向绑定**:Vue.js的双向数据绑定使得虚拟键盘输入的值能实时反映到绑定的Vue实例属性上,简化了数据管理和界面同步的工作。 4. **响应式设计**:作为Vue组件,它可以轻松适应不同屏幕尺寸,确保在手机、...

    JS调用本地软键盘.zip

    在压缩包中的“JS调用本地软键盘”文件中,除了这个基本的示例之外,还可能包含了更详细的实现,例如如何关闭键盘、如何与特定输入框关联、如何处理不同浏览器的兼容性问题,以及可能的错误处理和用户反馈机制等。...

    openlayer事件机制介绍

    事件机制是OpenLayers的核心部分,它使得用户与地图进行交互成为可能。在OpenLayers中,事件机制主要涉及到控件(Controls)和处理器(Handlers)的概念。 控件在OpenLayers中扮演着重要的角色,它们是附加到地图上...

    JavaScript精彩网页特效实例精粹

    - 事件监听:JavaScript可以通过addEventListener或attachEvent方法监听用户的交互行为,如点击、滚动、键盘输入等。 - 事件冒泡与事件捕获:理解事件在DOM层次中的传播机制,有助于优化事件处理。 - 事件委托:...

    JavaScript动态网页编程(实例版)

    JavaScript可以通过事件处理机制来响应用户的交互行为。常见的事件类型有: - **鼠标事件**:如`click`、`mouseover`、`mouseout`。 - **键盘事件**:如`keydown`、`keyup`。 - **表单事件**:如`submit`、`change`...

    JavaScript键盘事件常见用法实例分析

    综上所述,JavaScript提供了丰富的键盘事件处理机制,使得开发者可以根据用户的行为做出响应,从而提高网页的交互性和用户体验。正确掌握和使用这些键盘事件,对于开发复杂的应用和游戏至关重要。

    vue.js v-on事件使用,vue.js event事件绑定

    `v-on`指令就是Vue.js中用于事件绑定的关键机制,它允许我们将DOM事件与Vue实例的方法关联起来。本篇文章将深入探讨`v-on`事件绑定及其相关知识点。 首先,让我们了解`v-on`的基本用法。在Vue模板中,我们可以使用`...

    javascript实例(1470个)

    这个压缩包“JavaScript实例(1470个)”显然包含了大量的JS代码示例,覆盖了各种常见的前端特效和功能实现。 在JavaScript的世界里,实例是将抽象的概念转化为具体代码的过程,这些实例可能是用于创建动态效果、...

    JavaScript网页特效实例大全.rar

    - 事件冒泡和捕获:理解事件传播机制,有效控制事件处理顺序。 3. **CSS操作** - 动态样式修改:通过JavaScript改变元素的样式属性,如颜色、大小、位置等,实现动态效果。 - CSS3动画:结合CSS3的transition和...

    即用即查——JavaScript核心对象参考手册

    - 常见的鼠标和键盘事件 - **示例**:如何监听用户的点击事件,并执行相应的处理逻辑。 ##### 12. ActiveX技术 - **实例数量**:5个实例 - **覆盖内容**: - ActiveX控件的使用 - 安全性考虑 - 兼容性问题 - **...

    javascript经典特效---测试打字速度.rar

    2. **事件监听**:JavaScript的事件机制是关键,我们需要监听用户的键盘输入事件,例如`keydown`或`keyup`。通过`addEventListener`函数可以绑定事件处理函数,当用户按下或释放键盘键时,对应的函数会被调用。 3. ...

    JavaScript教程--从入门到精通.ppt

    7. **原型与继承**:讲解JavaScript的面向对象特性,包括原型链、构造函数、实例化,以及基于原型的继承机制。 8. **函数式编程**:介绍高阶函数、函数作为一等公民、柯里化、偏应用等函数式编程思想。 9. **...

    Js 清新漂亮的软键盘(基于jquery)

    5. **JavaScript对象和函数**:在`js`目录下的脚本中,可能包含一个或多个对象,如键盘实例,以及处理键盘逻辑的函数,如显示、隐藏键盘,以及处理按键按下后的事件。 6. **软键盘布局**:根据不同的输入需求,软...

    JavaScript API模型图

    通过上述分析可以看出,ArcGIS Server JavaScript API中的`Map`类提供了非常全面的功能,包括地图的显示、控制、导航、坐标转换以及丰富的事件监听机制。这些方法和事件使得开发者能够轻松地构建出功能强大的Web地图...

    js鼠标按键事件和键盘按键事件用法实例汇总

    在本文中,我们将深入探讨JavaScript中的鼠标按键事件和键盘按键事件,并通过实例来阐述它们的使用方法。 首先,我们来看键盘事件。JavaScript中有三个主要的键盘事件: 1. `keydown`:当用户按下键盘上的一个键时...

    At.js-master-自动补全

    当用户在输入框中键入字符时,At.js会监听键盘输入事件,然后对已输入的内容进行分析。它支持自定义的提及(@)或标签(#)符号,可以识别并处理这些特殊符号后的字符,查找匹配的建议数据。这些建议通常来自服务器...

Global site tag (gtag.js) - Google Analytics