JavaScriptキーイベント（全ブラウザ対応）_JavaScriptスキル

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

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

これら 3 つのイベント タイプのうち、キーダウンとキーアップは比較的低レベルですが、キー押下は比較的高度です。ここでのいわゆる高度とは、ユーザーがシフト 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 イベントの初期化

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

関数 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 でどのキーが押されたかを取得できます:

コードをコピー コードは次のとおりです。 :

function keyDown(e) {

var keycode = e.that;
var realkey = String.fromCharCode(e.that);
warning( "キーコード: " keycode " Character: " realkey);
}
document.onkeydown = keyDown

2.3 IE
の実装方法 IE プログラムには e 変数は必要ありません。e.that の代わりに window.event.keyCode を使用します。キー インデックス値を実際のキー値に変換する方法は String.fromCharCode(event.keyCode) と似ています。プログラムは次のとおりです。

コードをコピー コードは次のとおりです。

function keyDown( ) {

var keycode =event.keyCode ;
var realkey = String.fromCharCode(event.keyCode)
alter("Keycode: " keycode "character: " realkey); > document.onkeydown = keyDown



2.4 ブラウザの種類を決定する

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

コードをコピーします

は次のとおりです:

function keyUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var keycode = events.keyCode var realkey = String. .keyCode);
}else
var keycode = e.that; "Keycode: " keycode " Character: " realkey);
document.onkeyup = keyUp;
より簡単な方法は [2]:




コードをコピー

コードは次のとおりです:

Function keyUp(e) { var currKey=0,e=e| |event; currKey=e.keyCode||e.that||e.charCode; var keyName = 文字列。 fromCharCode(currKey); alert("キーコード: " currKey " 文字: " keyName); }

document.onkeyup = keyUp;

簡単に説明しましょう:
まず、e=e||event; このコードはブラウザのイベント オブジェクトの取得と互換性を持たせるためのものです。 js でのこのコードの意味は、隠し変数 e が FireFox または Opera に存在する場合、e||event は e を返します。隠し変数 e が IE に存在しない場合、event が返されます。
2 番目に、currKey=e.keyCode||e.that||e.charCode; この文は、ブラウザのキー イベント オブジェクトのキー コード属性と互換性があります (詳細については、パート 3 を参照)。 IE には keyCode 属性しかありませんが、FireFox には what 属性と charCode 属性があり、Opera には keyCode と what 属性があります。

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

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

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

キーコードやキーイベントの文字コードはブラウザ間での移植性に欠けており、ブラウザやケースイベントによってキーコードや文字コードの格納方法が異なります。IEでは1つしかありません。 keyCode 属性であり、その解釈はイベント タイプによって異なります。 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">

type="text/javascript">
var keystring = "";//レコードキー文字列
function $(s){return document.getElementById(s)?document.getElementById(s) :s;}
関数 keypress(e)
{
var currKey=0,CapsLock=0,e=e||event;
currKey=e.keyCode||e.what|| e.charCode;
CapsLock=currKey>=65&&currKey switch(currKey)
{
// バックスペース、タブ、キャリッジ リターン、スペース、矢印キー、削除はブロックされます Key
の場合8: ケース 9: ケース 13: ケース 32: ケース 37: ケース 38: ケース 40: ケース 46: keyName = "";break;
デフォルト:keyName = String.fromCharCode(KeycurrKey); 🎜> }
keystring = keyName;
}
関数 keydown(e)
var e=e||event;
var currKey=e |どの | 🎜> ケース 8: keyName = "[Backspace]" ブレーク
ケース 13: keyName = "[Enter];ブレーク;
ケース 32:keyName = "[スペース]"; ブレーク
ケース 34:キー名 = "[ページダウン]";
case 35:keyName = "[終了]";
case 36:keyName = "[ホーム]";
case 37:keyName = "[矢印キー]";
case 38:keyName = "[方向キーは上]";
case 39:keyName = "[方向キーは右]";
case 40:keyName = "[方向キーは下]; "; ブレーク;
case 46:keyName = "[削除]"; ブレーク;
default:keyName = ""; ブレーク;
}
keystring = keyName; "content").innerHTML= keystring;
}
function keyup(e)
{
$("content").innerHTML=keystring;
document.onkeypress= keypress; onkeydown =keydown;



キーボードの応答を表示するには、任意のキーを押してください。キーの値:



コード分析:
$ (): dom ベースの取得ID

keypress(e): ファンクション キーは keydown を使用して取得する必要があるため、keypress でブロックされます。

keydown(e): 主にファンクションキーの取得を実現します。

keyup(e): インターセプトされた文字列を表示します。