JS キーボード イベントの包括的な制御に関する簡単な説明

主に4つのパートに分かれています

パート1: ブラウザキーイベント
パート2: 互換性のあるブラウザ
パート3: コードの実装と最適化
パート4: まとめ

パート1: ブラウザキーイベント

jsでキーロギングを実装するには、ブラウザの 3 つの主要なイベント タイプ、つまり keydown、keypress、keyup に注意する必要があります。これらはそれぞれ onkeydown、keypress、keyup に対応します。 3 つのイベントは、onkeypress と onkeyup を処理します。一般的なキー押下では、キーダウン、キー押下、キーが放されたときのキーアップの順に 3 つのイベントすべてが生成されます。

これら 3 つのイベント タイプのうち、キーダウンとキーアップは比較的低レベルですが、キー押下は比較的高度です。ここでのいわゆる高度とは、ユーザーが Shift + を押したときのことを意味します。 1、キーを押すとキー イベントが解析され、印刷可能な文字「!」が返されますが、キーを押すとキーを押すとシフト + 1 イベントのみが記録されます。 [1]

ただし、キー押下は、印刷可能な一部の文字と、F1 ～ F12、Backspace、Enter、Escape、などのファンクション キーに対してのみ有効です。 PageUP、PageDown、矢印の方向ではキー押下イベントは生成されませんが、キーダウン イベントとキーアップ イベントは生成できます。ただし、FireFox では、ファンクション キーはキー押下イベントを生成できます。

keydown、keypress、keyup イベント ハンドラーに渡されるイベント オブジェクトには、いくつかの共通のプロパティがあります。 Alt、Ctrl、または Shift をキーと一緒に押すと、これはイベントの altKey、ctrlKey、shiftKey プロパティによって表されます。これらのプロパティは FireFox と IE に共通です。

パート 2: ブラウザの互換性

ブラウザに関係するすべての JS では、ブラウザの互換性の問題を考慮する必要があります。

現在、一般的に使用されているブラウザは主に IE ベースのものと Mozilla ベースのものです。 Maxthon は IE カーネルに基づいていますが、FireFox と Opera は Mozilla カーネルに基づいています。

2.1 イベントの初期化

まず最初に知っておく必要があるのは、イベントを初期化する方法です。基本的なステートメントは次のとおりです:

 function keyDown(){}
　　 document.onkeydown = keyDown;

キーボードのどのキーが押されても、ブラウザがこのステートメントを読み取るとき、 KeyDown() 関数が呼び出されます。

2.2 FireFoxとOperaの実装方法

FireFoxとOperaはIEより実装が面倒なので、先に説明します。

keyDown() 関数には隠し変数があります。通常、この変数を表すには文字「e」を使用します。

関数 keyDown(e)

変数 e はキーストローク イベントを表します。どのキーが押されたかを調べるには、次の属性を使用します。 e.どれ

e.これはキーのインデックス値を与えます。インデックス値をキーの英数字値に変換するメソッドでは、次のように静的関数 String.fromCharCode() を使用する必要があります。
String.fromCharCode(e.that)

上記のステートメントをまとめると、FireFox でどのキーが押されたかを取得できます:

function keyDown(e) 
{  　　  　　  
var keycode = e.which;  　　 　　  
var realkey = String.fromCharCode(e.which);  　　 　　  
alert("按键码: " + keycode + " 字符: " + realkey);  　　  
} 　　  
document.onkeydown = keyDown;

2.4 ブラウザのタイプを決定する

上記では、さまざまなブラウザのオブジェクト メソッドでキー イベントを取得する方法を学習しました。次に、ブラウザのタイプを決定する必要があります。以下に、多くのメソッドがありますが、いくつかは理解しやすいものであり、非常に賢いメソッドもあります。 まず、navigator オブジェクトの appName 属性を使用する方法について説明します。 もちろん、ここで userAgent 属性を使用することもできます。 appName を使用してブラウザの種類、IE、および Maxthon の appName は「Microsoft Internet Explorer」です 、FireFox と Opera の appName は「Netscape」であるため、比較的単純な機能を備えたコードは次のとおりです:

function keyUp(e) 
{   　　   　　 
if(navigator.appName == "Microsoft Internet Explorer") 　　   　　 
{ 　　   　　  　　
var keycode = event.keyCode;  　　   　　  　　
var realkey = String.fromCharCode(event.keyCode);  　　   　　  
}else　　   　　  
{ 　　   　　  　　  
var keycode = e.which;  　　   　　 　 　 
var realkey = String.fromCharCode(e.which);  　　  　　  
} 　　  　　  
alert("按键码: " + keycode + " 字符: " + realkey); 　　  　
} 　　   
document.onkeyup = keyUp;

より簡単な方法は [2]:

 function keyUp(e) 
 { 　　    　 
 var currKey=0,e=e||event; 　　   　  
 currKey=e.keyCode||e.which||e.charCode; 　　   　　
 var keyName = String.fromCharCode(currKey); 　　    　 
 alert("按键码: " + currKey + " 字符: " + keyName); 　　    
 } 　　    
 document.onkeyup = keyUp;

上記の方法はより賢いので、簡単に説明します:

まず、コード e=e||even; はブラウザのイベント オブジェクト取得との互換性を保つためのものです。 js でのこのコードの意味は、隠し変数 e が FireFox または Opera に存在する場合、e||event は e を返します。隠し変数 e が IE に存在しない場合、event が返されます。

2 番目に、currKey=e.keyCode||e.that||e.charCode; この文は、ブラウザのキー イベント オブジェクトのキー コード属性と互換性があります (たとえば、IE の場合は、パート 3 を参照)。 、keyCode 属性のみがあります。FireFox には what 属性と charCode 属性があり、Opera には keyCode 属性と what 属性があります。

上記のコードはブラウザーとのみ互換性があり、keyup イベント オブジェクトを取得し、キー コードとキー文字をポップアップするだけですが、キーを押すと文字キーがすべて大文字になるという問題が発生します。 Shift キーを押すと、表示される文字が非常に奇妙になるため、コードを最適化する必要があります。

パート 3: コードの実装と最適化

3.1 キーコードとキーイベントの文字コード

IE には keyCode 属性が 1 つだけあり、その解釈はイベントの種類によって異なります。 keydown の場合、keyCode にはキー コードが格納されます。 キー押下イベントの場合、keyCode には文字コードが格納されます。 IE には what 属性と charCode 属性がないため、that 属性と charCode 属性は常に未定義です。

FireFox の keyCode は常に 0 です。keydown/keyup のときは charCode=0 となり、これがキーコードです。イベントキープレスが発生すると、CHARCODEとCHARCODEの値が同じとなり、文字コードが格納されます。

Operaではkeydown/keyupイベントではキーコードを格納し、キー押下時は文字コードを格納し、charCodeは定義されず常に同じです。未定義。

3.2 用keydown/keyup还是keypress

第一部分已经介绍了keydown/keyup和keypress的区别，有一条比较通用的规则，keydown事件对于功能按键来说是最有用的，而keypress事件对于可打印按键来说是最有用的[3]。

键盘记录主要是针对于可打印字符和部分功能按键，所以keypress是首选，然而正如第一部分提到的，IE中keypress不支持功能按键，所以应该用keydown/keyup事件来进行补充。

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.getElementByIdx_x(s)?document.getElementByIdx_x(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="$(&#39;content&#39;).innerHTML = &#39;&#39;;keystring = &#39;&#39;;"/> 
 <br/>请按下任意键查看键盘响应键值：<span id="content"></span> 
 </BODY> 
 </HTML>

代码分析：

$()：根据ID获取dom

keypress(e)：实现对字符码的截获，由于功能按键要用keydown获取，所以在keypress中屏蔽了这些功能按键。

keydown(e)：主要是实现了对功能按键的获取。

keyup(e)：展示截获的字符串。

代码基本上就算实现完成了！呵呵

第四部分：总结

编写代码的最初目的是能够通过js记录按键，并返回一个字符串。

上述代码只是用js实现了基本的英文按键记录，对于汉字是无能为力，记录汉字，我能想到的办法，当然是用js，是用keydown和keyup记录底层按键事件，汉字解析当然无能为力。当然你可以用DOM的方式直接获取input中的汉字，但这已经离开了本文讨论的用按键事件实现按键记录的本意。

上述代码还可以实现添加剪切板的功能，监控删除的功能等等。。。

这篇浅谈js键盘事件全面控制就是小编分享给大家的全部内容了，希望能给大家一个参考，