パート 1: ブラウザーのキーイベント
js を使用してキーロギングを実装するには、ブラウザの 3 つの主要なイベント タイプ、つまり keydown、keypress、keyup に注意する必要があります。これらは、それぞれ onkeydown、onkeypress、onkeyup の 3 つのイベント ハンドルに対応します。一般的なキー押下では、キーダウン、キー押下、キーが放されたときのキーアップの順に 3 つのイベントすべてが生成されます。
これら 3 つのイベント タイプのうち、キーダウンとキーアップは比較的低レベルですが、キー押下は比較的高度です。ここでのいわゆる高度とは、ユーザーが Shift + 1 を押すと、keypress がキー イベントを解析して印刷可能な「!」文字を返すのに対し、keydown と keyup は shift + 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 イベントの初期化
最初に知っておく必要があるのは、イベントを初期化する方法です。基本的なステートメントは次のとおりです。
関数 keyDown(){}
document.onkeydown = keyDown;
ブラウザがこのステートメントを読み取ると、キーボードのどのキーが押されたかに関係なく、KeyDown() 関数が呼び出されます。
2.2 FireFoxとOperaの実装方法
FireFox や Opera などのプログラムの実装は IE よりも面倒なので、ここで先に説明します。
keyDown() 関数には隠し変数があります。通常、この変数を表すには文字「e」を使用します。
ファンクションキーダウン(e)
変数 e はキーストローク イベントを表します。どのキーが押されたかを確認するには、どの属性を使用します。
e.どれ
e.これはキーのインデックス値を与えます。インデックス値をキーの英数字値に変換するメソッドでは、次のように静的関数 String.fromCharCode() を使用する必要があります。
String.fromCharCode(e.that)
上記のステートメントをまとめると、FireFox でどのキーが押されたかを取得できます。
次のようにコードをコピーします。
関数 keyDown(e) {
var キーコード = e.that;
var realkey = String.fromCharCode(e.that);
alert("キーコード: " + キーコード + " 文字: " + リアルキー);
}
document.onkeydown = keyDown;
2.3 IEの実装方法
IE のプログラムには e 変数は必要ありません。キー インデックス値を実際のキー値に変換する方法は、String.fromCharCode(event.keyCode) と同様です。は次のとおりです。
次のようにコードをコピーします。
関数 keyDown() {
var キーコード = イベント.keyCode;
var realkey = String.fromCharCode(event.keyCode);
alert("キーコード: " + キーコード + " 文字: " + リアルキー);
}
document.onkeydown = keyDown;
2.4 ブラウザの種類を決定する
さまざまなブラウザでキー イベント オブジェクトを取得する方法を上で学びました。次に、ブラウザの種類を決定する必要があります。いくつかの方法は理解しやすく、また、非常に賢い方法もあります。まず、一般的な方法について説明します。 : つまり、navigator オブジェクトの appName 属性を使用します。もちろん、userAgent 属性を使用して、IE と Maxthon の appName を決定します。 、FireFoxとOperaのappNameは「Netscape」なので、比較的単純な機能のコードは次のとおりです。
次のようにコードをコピーします。
関数 keyUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var キーコード = イベント.keyCode;
var realkey = String.fromCharCode(event.keyCode);
}それ以外
{
var キーコード = e.that;
var realkey = String.fromCharCode(e.that);
}
alert("キーコード: " + キーコード + " 文字: " + リアルキー);
}
document.onkeyup = keyUp;
より簡単な方法は [2] です。
次のようにコードをコピーします。
関数 keyUp(e) {
var currKey=0,e=e||イベント;
currKey=e.keyCode||e.that||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 が返されます。
次に、currKey=e.keyCode | Opera には what 属性と charCode 属性があり、Opera には keyCode 属性と what 属性があります。
上記のコードはブラウザとのみ互換性があり、keyup イベント オブジェクトを取得し、キー コードとキー文字をポップアップします。ただし、キーを押すと文字キーがすべて大文字になるという問題が発生します。 Shift キーを押すと、文字が非常に奇妙になるため、コードを最適化する必要があります。
パート 3: コードの実装と最適化
3.1 キーコードとキーイベントの文字コード
キーコードやキーイベントの文字コードはブラウザ間での移植性に欠けており、ブラウザやケースイベントごとにキーコードや文字コードの格納方法が異なります。
IE には keyCode 属性が 1 つだけあり、その解釈はイベント タイプによって異なります。 keydown の場合、keyCode にはキー コードが格納されます。keypress イベントの場合、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 イベントはファンクション キーに最も役立ち、keypress イベントは印刷可能なキーに最も役立ちます [3]。
キーボードのログ記録は主に印刷可能な文字と一部のファンクション キーに対して行われるため、キー押下が最初の選択肢となります。ただし、最初の部分で述べたように、IE のキー押下はファンクション キーをサポートしていないため、キーダウン/キーアップ イベントを使用してそれを補う必要があります。
3.3 コードの実装
一般的な考え方は、keypress イベント オブジェクトを使用してキー文字を取得し、keydown イベントを使用して Enter や Backspace などのファンクション文字を取得することです。
コードの実装は次のとおりです
次のようにコードをコピーします。
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>js キーストロークの記録</TITLE>
<META NAME="ジェネレーター" CONTENT="EditPlus">
<META NAME="著者" CONTENT="Yu Shanren">
<META NAME="キーワード" CONTENT="js キーストロークの記録">
<META NAME="説明" CONTENT="js キーストロークの記録">
</HEAD>
<本体>
<script type="text/javascript">
var keystring = "";//キー文字列を記録します
関数 $(s){return document.getElementById(s)?document.getElementById(s):s;}
ファンクションキーを押す(e)
{
var currKey=0,CapsLock=0,e=e||event;
currKey=e.keyCode||e.that||e.charCode;
CapsLock=currKey>=65&&currKey<=90;
スイッチ(currKey)
{
//バックスペース、タブ、キャリッジリターン、スペース、方向キー、削除キーをブロックします
ケース 8: ケース 9: ケース 13: ケース 32: ケース 37: ケース 38: ケース 39: ケース 40: ケース 46: keyName = "";break;
デフォルト:keyName = String.fromCharCode(currKey);
}
キー文字列 += キー名;
}
ファンクションキーダウン(e)
{
var e=e||イベント;
var currKey=e.keyCode||e.that||e.charCode;
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
{
スイッチ(currKey)
{
ケース 8: keyName = "[Backspace]";
ケース 9: keyName = "[表]";
case 13:keyName = "[Enter]";
case 32:keyName = "[スペース]";
case 33:keyName = "[PageUp]";
case 34:keyName = "[PageDown]";
case 35:keyName = "[終了]";
case 36:keyName = "[ホーム]";
case 37:keyName = "[矢印キー左]";
case 38:keyName = "[上矢印キー]";
case 39:keyName = "[矢印キー右]";
case 40:keyName = "[下矢印]";
case 46:keyName = "[削除]";
デフォルト:キー名 = "";
}
キー文字列 += キー名;
}
$("コンテンツ").innerHTML=keystring;
}
ファンクションキーアップ(e)
{
$("コンテンツ").innerHTML=keystring;
}
document.onkeypress=キープレス;
document.onkeydown =キーダウン;
document.onkeyup =keyup;
</script>
<input type="テキスト" />
<input type="button" value="記録を消去" onclick="$('content').innerHTML = '';keystring = '';"/>
<br/>任意のキーを押して、キーボード応答キーの値を表示してください: <span id="content"></span>
</BODY>
</HTML>
コード分析:
$(): IDに基づいてdomを取得します
keypress(e): 文字コードのインターセプトを実装します。ファンクション キーは keydown を使用して取得する必要があるため、これらのファンクション キーはキープレスでブロックされます。
keydown(e): 主にファンクションキーの取得を実現します。
keyup(e): インターセプトされた文字列を表示します。