电脑技术学习

js 判断键盘事件大全 兼容FireFox和IE(退格、制表、回车、空格、方向键、删除键等)

dn001

3.3 代码的实现;

总体思路,用keypress事件对象获取按键字符,用keydown事件获取功能字符,如Enter,Backspace等。

代码实现如下所示

复制代码

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