JS キーボードイベントの包括的な制御に関する簡単な説明-jsチュートリアル-php.cn

主に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键盘事件全面控制就是小编分享给大家的全部内容了，希望能给大家一个参考，