イベント、互換性と最適化のJSキーボードの種類

キーイベントブラウザの最初に、概要

れるonkeypressと3つのイベントハンドラonkeyupのonkeydownを対応JSとのキーロガーを達成するためのキーイベントタイプの三種類、ブラウザ、そのKeyDownイベント、キー入力やからkeyupに注意を払います、、。典型的なボタンは、いつからkeyup、ボタンを放し、KeyDownイベント、キー入力に続いて、すべての3つのイベントを生成します。
イベントのこれらの3種類で、KeyDownイベントや、より高度なキープレスながら、下を比較keyUpイベント。ここでは、いわゆるハイレベルのキー押下リターン、ユーザーを押すが、1 +シフト時間を指し、「！」の文字の印刷可能なこのキーイベントの解析の後、およびKeyDownイベントとからkeyupは、ちょうどこのイベントを記録+ 1をシフトします。しかし、唯一の文字の一部のためのキー操作を効果的にプリントアウトすることができ、このようなF1-F12、Backspaceキーは、入力としての機能キー、のためにエスケープ、PageUpキー、PageDownキーなどの方向を示す矢印、キープレスイベントを生成しませんが、およびからkeyupをKeyDownイベント生成することができますイベント。しかし、Firefoxでは、ファンクションキーは、キープレスイベントを生成することができます。
KeyDownイベントに渡され、キープレスイベントオブジェクトとからkeyupイベントハンドラは、いくつかの共通の属性を持っています。Altキー、Ctrlキー、Shiftキーを押したりした場合一緒に、altKeyのイベント、プロパティ、shiftKey ctrlKeyが表されていることで、これらの属性は、FirefoxとIEで共通しています。

第二に、互換性のあるブラウザ

すべての関与ブラウザjsが、我々は、ブラウザの互換性の問題を考慮する必要があります。最も一般的に使用される主にIEブラウザとMozillaベースの二つのカテゴリに基づいています。IE、Maxthonは（非高速バージョン）、ブラウザ360（非高速バージョン）がIE、オペラとFirefoxとMozillaベースのコアに基づいてカーネルです。
1、初期化イベント
あなたが最初に知っておく必要がありますが、イベントを初期化する方法で、以下のように、基本的な文は次のとおりです。
　　関数のKeyDown（）{}
　　 document.onkeydown =のKeyDown;
ブラウザはすべて、押され関わらず、キーボード上のどのキーのこの文を、読み取ったときKeyDownイベント（）関数を呼び出します。
2、FirefoxやOperaの実装
のFireFoxやOperaとIEのトラブルよりも、達成するための他の手順は、まずここで説明します。KeyDownイベント（）関数は、隠れ変数を持っている-一般的に、我々は変数を表すために文字「e」を使用しています。
　　関数KEYDOWN（e）は
：変数Eは、このプロパティを使用するように、押されたキーを探して、キーストロークイベントを表し
　　 e.which
e.whichはインデックスキーの値を説明する、インデックス値をキーに変換します文字や数値の方法に、String.fromCharCode静的関数を（使用する必要があります）、次のよう
　　に、String.fromCharCode（e.which）を
上記の文は一緒に、我々はキーを押されたFirefoxで取得できます。

関数KEYDOWN（E）{  
　　   　　   VARのキーコード= e.which。  
　　 　　    VaRの realkey = に、String.fromCharCode（e.which）。  
　　 　　    警告（ "按键码：" +キーコード+ "字符：" + realkey）。  
　　    } 
document.onkeydown = KEYDOWN。

3、IEの実装
に、String.fromCharCode（event.keyCode）、次の手順：IEは、実際のキーメソッドにキーのインデックス値と同様、代わりwindow.event.keyCodeのe.whichを使用する、プログラム変数eを必要としません：

機能KEYDOWN（）{  
　　 　　       VARのキーコード= event.keyCode。  
　　 　　      VaRの realkey = に、String.fromCharCode（event.keyCode）。  
　　   　　    警告（ "按键码：" +キーコード+ "字符：" + realkey）。  
　　     }   
document.onkeydown = KEYDOWN。

4、ブラウザの種類を決定
ブラウザの様々な方法を理解するために、上記のは、キーイベントオブジェクト、ブラウザの種類、この方法で多くのことを決定するために、次の必要性を取得する方法で、まず、比較的理解しやすいだけでなく、非常に巧妙な方法がありますもちろん、userAgentプロパティを使用することができますのappNameプロパティのナビゲーターオブジェクトの使用は、ここでは、ブラウザの種類を決定するために実装されるAPPNAMEされ、IEとMaxthonの者のappNameは、「Microsoft Internet Explorerの」ある、とFirefoxとOperaのappName "は次のとおりです。一般的な方法が言いましたNetscapeは」、それは次のようにコードの比較的単純な関数であるです：

 機能keyUpイベント（E）{  
　　     　　  場合（navigator.appNameは"Microsoft Internet Explorerを" == ）
　　      　　 { 
　　      　　    　　VARのキーコード= event.keyCode。  
　　      　　    　　VaRの realkey = に、String.fromCharCode（event.keyCode）。  
　　     　　    } 
                        他{
　　     　　   　　   VARのキーコード= e.which。  
　　     　　 　 　   VaRの realkey = に、String.fromCharCode（e.which）。  
　　    　　    } 
　　    　　   アラート（ "按键码：" +キーコード+ "字符：" + realkey）。
　　   　} 
　　      document.onkeyup = keyUpイベント; 
比较简洁的方法是：
　　      関数keyUpイベント（E）{
　　       　   VARの currKey = 0、E = E || イベント; 
　　      　   currKey = e.keyCode || || e.which e.charCode;
　　      　　VARのkeyName = に、String.fromCharCode（currKey）。
　　       　  警告（ "按键码：" + currKey + "字符：" + のkeyName）。
　　       } 
　　       document.onkeyup = keyUpイベント。

上記の方法は、説明するのは簡単で、比較的賢いです：

まず、E = E ||イベントの、このコードの目的は、得られた互換性のあるブラウザ・イベント・オブジェクトです。jsのこのコードの意味は、FirefoxやOperaは、隠された変数eの存在であればIEは、隠し変数と電子が存在しない場合は、E || e。イベントのリターンは、イベントが返されることです。
第二に、currKey = e.keyCode || || e.which e.charCode;そのようなIE、唯一キーコード属性、Firefoxなどの互換性の属性（セクションIIIを参照）キーイベントオブジェクトブラウザ、キーコード・フレーズそこのプロパティをCHARCODEとされ、OperaはkeyCodeが、どの属性を持っています。

コードは、互換性のあるブラウザは、取得からkeyupイベントオブジェクトには、単純にキーコードとキーの文字をポップですが、あなたのキーは、文字キーは大文字であるときに、問題が発生し、Shiftキーを押し、表示非常に奇妙な文字なので、コードを最適化する必要があります。

第三に、コードの実装と最適化

1、文字コードとキーイベントのキーコード
IEで、唯一のkeyCodeプロパティ、およびその解釈は、イベントの種類によって異なります。KeyDownイベントのためには、キーコードストレージは、KeyPressイベントのキーコードはキーコードストレージが文字コードである、です。そして、これとIEでcharCodeはプロパティ、およびcharCodeは常に未定義のプロパティなし。
FireFoxのキーコードは常に0、時間のKeyDown / keyUpイベント、charCodeは= 0のとき、キーコードです。イベントのキー押下、同じ値とcharCodeは両方とも、文字コードを記憶します。
オペラでは、KeyDownイベント/からkeyupイベントでは、常に同じであるのkeyCode両方の値が、彼らはキー入力時にキーコードを格納している、彼らは文字コードに格納され、charCodeはが定義されていない、それは常に定義されていません。
2、/またはキー押下keyUpイベントのKeyDownと
最初の部分より一般的なルールが存在し、区別のKeyDown / keyUpイベントとキープレスを導入して、機能キーのためのKeyDownイベントが最も有用であり、印刷可能なキーのキー押下イベントであります最も有用な[3]。
キーロガーは、主に印刷可能な文字といくつかのファンクションキーに向けられているので、キー操作が好まれますが、補完するためのKeyDown / keyUpイベントイベントを使用する必要がありますので、しかし、最初の部分で述べたように、IEは、キー押下ファンクションキーをサポートしていません。3、の実装コードなどのKeyDownイベントになど、Backspaceキー、入力として、キーの文字キー押下イベントオブジェクトのための一般的な考え方、文字を取得する機能、。次のようにコードの実装は次のとおりです。

<身体> 
<スクリプトタイプ= "テキスト/ JavaScriptを"> VARキー文字列= ""; // レコード・キーの文字列関数 $（S）{ 返すのdocument.getElementById（S）を？のdocument.getElementById（S）：S;}
 関数KeyPressイベント（E）
{ VARの currKey = 0、CapsLockキー= 0、E = E || イベント; 
　  currKey = e.keyCode || || e.which e.charCode; 
　 CapsLockキー = currKey> = 65 && currKey <= 90 、
　  スイッチ（ currKey）
　 { // 遮蔽バックスペース、タブ、入力、空間、方向キー、Deleteキーケース 8：ケース 9：ケース 13は：ケース 32：ケース


　  
   　 　 
   　 　 37：ケース 38：ケース 39：ケース 40：ケース 46：keyNameの= ""; 破ります;
   　 　 デフォルト：keyNameの=に、String.fromCharCode（currKey）。破ります; 
　 } 
　 キー文字列 + = keyNameの。
} 
関数のKeyDown（E）
{ 
　 VARの E = E || イベント;
　 VAR currKey = e.keyCode || || e.which e.charCode;
　 もし（（currKey> 7 && currKey <14）||（currKey> 31 && currKey <47 ））
　 { 
　 　   スイッチ（currKey）
   　 　 { 
    　 　 　 ケース 8のkeyName = "[退格]"; ブレーク;
    　 　 　 ケース 9：keyNameの= "[制表]"。破ります;
    　 　 　 ケース 13のkeyName = "[回车]"。破ります;
    　 　 　 ケース 32：keyNameの= "[空格]"。破ります;
    　 　 　 ケース 33のkeyName = "[PageUpキー"。   破ります;
    　 　 　 ケース 34：keyNameの= "[PageDownキー]"。   破ります;
    　 　 　 ケース 35：keyNameの= "[終了]"。   破ります;
    　 　 　 ケース 36：keyNameの= "[ホーム]";   破ります;
    　 　 　 ケース 37：keyNameの= "【方向键左]"。   破ります;
    　 　 　 38：のkeyName = "【方向键上]";   破ります;
    　 　 　 ケース 39のkeyName = "【方向键右]";   破ります;
   　 　 　   ケース 40：keyNameの= "【方向键下]";   破ります;
    　 　 　 ケース 46：keyNameの= "[删除]";   破ります;
    　 　 　 デフォルト：keyNameの= "";    破ります; 
　 　   } 
　 　   キー文字列 + = keyNameの。
　 } 
　 $（ "内容"）のinnerHTML = キー文字列。
} 
関数keyUpイベント（E）
{ 
　 $（ "コンテンツ"）のinnerHTML = キー文字列。
} 
ドキュメント。KeyPressイベント; 
document.onkeydown = KEYDOWN; 
document.onkeyup = keyUpイベント;
 </ SCRIPT> 
の<input type = "text" /> 
<INPUTタイプ= "ボタン"値= "空のレコード" onclickの=「$（ 'コンテンツ '）。 = innerHTMLの'';キー文字列= ''; "/> 
キーを押して、キーボードの応答を参照するには、任意のキー：<スパンIDは="コンテンツ「> </ span>を
</ body>を

コード分析：
$（）：DOM IDの取得
キーの押下（E）は：ファンクションキーは、KeyDownイベント取得使用しているため、実現するためのキー押下でのファンクションキーのシールドを文字コードを傍受しました。
KeyDownイベント（E）：主な機能は、キーへのアクセスを達成することです。
keyup（e）は：ショーは、文字列を傍受しました。

第四に、キーイベントの概要

オリジナルのコードオブジェクトは、キーJSを通じて記録し、文字列を返すことができます。
JS上記のコードを達成もちろん、JSを使用することで、漢字のための基本的な英語のキーロガーは無力、記録漢字です、私は考えることができ必要ですが、文字を解決する無力、当然のことながら、基本的なキーのKeyDownイベントやからkeyupが記録されています。もちろん、あなたが直接DOMと漢字の入力を取得することができますが、それは重要な記録を達成するために意図して、この記事で説明したキーイベントを残しています。
コードはまたように、クリップボード機能を追加削除する機能を監視し、達成することができます。。。

：より転載http://www.itxueyuan.org/view/5796.html

ます。https：//www.cnblogs.com/JoannaQ/archive/2013/05/08/3068018.htmlで再現