IEとFirefoxのキャリッジリターンイベント(jsとjquery)_javascriptスキルと互換性あり

JavaScript は IE および Firefox のキャリッジ リターン イベントと互換性があります

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

jquery は IE の復帰イベントと互換性がありますおよび Firefox

コードをコピー コードは次のとおりです:$(document) .ready(function(){

$ ("Enter キーを押すためのコントロール").keydown(function(e){

var curKey = e.that;
if(curKey == 13){
$("#イベント ボタン コントロールを入力").click();

}
}); jquery マルチブラウザキャプチャ Enter イベント コード

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

$(document).keydown(function (event) { if (event.keyCode == 13) { $('form').each(function() { //コード}); }

});

ボタンのデフォルトの Enter イベント (jquery

に基づく)ここではボタン button デフォルトの改行 (Enter) イベントを紹介します。 submit を使用できる場合は、次のコードを確認する必要はありません。submit はデフォルトでキャリッジ リターン イベント (enter) を直接設定できるためです。
ここに、コードが jquery を通じて完成されることを宣言します。実際の列コードは自分で作成したもので、コピーするだけで使用できますが、jquery パッケージをインポートする必要があります。 IE と Firefox をサポートする方法はあり、間違いなく機能します。私がそれに取り組んでいたとき、オンラインでいくつかのコードを見つけましたが、基本的にどれも Firefox をサポートしていませんでした。さて、ナンセンスな話はもう十分です。コードのデモを開始します。どなたでも間違いを修正したり、技術的なアドバイスを提供していただけますよう、よろしくお願いいたします。

コードをコピー

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

3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/ DTD/xhtml1-transitional.dtd"> < title>Firefox IE と IE の両方でサポートされるイベントを入力 ;


より良い解決策があれば共有したいと思います。 。

今日は Enter キーでフォームログインを送信する関数を作成しました。私のコードは次のとおりです:




コードをコピー

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

仮パラメータの前に (がありません) というエラーが発生しました。インターネットによると、ソース コードを再度変更することが推奨されています:




コードをコピー

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

別のイベントが定義されていないというエラーが発生しました。

一生懸命探した結果、見つけました（原文は次のとおりです）：
主に 4 つのパートに分かれています
パート 1: ブラウザのキーイベント
パート 2: 対応ブラウザ
パート 3: コードの実装と最適化
パート 4: 概要

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

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

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

ただし、キー押下は印刷可能な一部の文字に対してのみ有効ですが、F1 ～ F12、Backspace、Enter、Escape、PageUP、PageDown、矢印方向などのファンクション キーには有効です。 keypress イベントは生成されませんが、keydown イベントと keyup イベントは生成できます。ただし、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」を使用します。

function keyDown(e)

変数 e は、どのキーが押されたかを調べるには、どの属性を使用します:

e.that

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

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

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

function keyDown(e) {

var keycode = e.that;
var realkey = String.fromCharCode( e.that );
alert("keycode: " 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);
alert("キーコード: " keycode " 文字: " realkey); .onkeydown = keyDown;


2.4 ブラウザの種類の決定

さまざまなブラウザでキー イベント オブジェクトを取得する方法を学習しました。次に、ブラウザの種類を決定する必要があります。多くのメソッドがありますが、いくつかは理解しやすいものであり、非常に賢いメソッドもあります。まず、一般的なメソッドについて説明します。もちろん、ここで 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 = 文字列。 fromCharCode(event.keyCode);
}else
{
var realkey = String.fromCharCode(e.that); "Keycode: " keycode " Character: " realkey);
}
document.onkeyup = keyUp;


より簡単な方法は次のとおりです:

コードをコピー コードは次のとおりです: function keyUp(e) {

var currKey=0,e=e | |event;

currKey=e.keyCode||e.that||e.charCode;
var keyName = String.fromCharCode(currKey); " keyName);
}
document.onkeyup = keyUp;


上記の方法はより賢明です。簡単に説明しましょう。
まず、e=e||event; this このコードはブラウザのイベントオブジェクト取得との互換性を保つためのものです。 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 では keyCode 属性は 1 つだけあり、その解釈はイベントの種類によって異なります。 keydown の場合は keyCode にキー コードが格納され、keypress イベントの場合は keyCode に文字コードが格納されます。 IE には what 属性と charCode 属性がないため、that 属性と charCode 属性は常に未定義です。

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

Opera では、keydown/keyup イベントではキーコードが格納されますが、キー押下時には文字コードが格納されます。定義されており、常に未定義です。

3.2 キーダウン/キーアップまたはキープレス

最初の部分では、キーダウン/キーアップとキープレスの違いについて説明しました。キーダウン イベントはファンクション キーに最も役立ちます。そして keypress イベントは印刷可能なキーに最も役立ちます [3]。

キーボードのログは主に印刷可能な文字と一部のファンクション キーを対象としているため、キープレスが最初の選択肢となります。ただし、最初の部分で述べたように、IE のキープレスはファンクション キーをサポートしていないため、keydown/keyup イベントは補充してください。

3.3 コードの実装
一般的な考え方は、keypress イベント オブジェクトを使用してキー文字を取得し、keydown イベントを使用して Enter、Backspace などのファンクション文字を取得することです。

コードの実装は次のとおりです




コードをコピーします

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

"キーワード" CONTENT="js キーストローク ログ">




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



コード分析:
$ (): dom ベースの取得ID
keypress(e): 文字コードのインターセプトを実装します。ファンクション キーは keydown を使用して取得する必要があるため、これらのファンクション キーは keypress でブロックされます。
keydown(e): 主にファンクションキーの取得を実現します。
keyup(e): インターセプトされた文字列を表示します。

コードはほぼ完成しました。笑

パート 4: 概要

コードを記述する本来の目的は、js を通じてキーストロークを記録し、文字列を返すことができるようにすることです。

上記のコードは、基本的な英語のキーストロークの記録を実装するために js を使用しているだけです。これは、中国語の文字を記録するために思いつく唯一の方法です。 keydown と keyup を使用して、基本的なキーストローク イベントと漢字分析を記録することはできません。もちろん、DOM を使用して入力内の漢字を直接取得することもできますが、これは、この記事で説明するキー イベントを使用してキーの記録を実現するという本来の目的から逸脱しています。

上記のコードは、クリップボードの追加、削除の監視などの機能も実装できます...

そのガイダンスに従って、コードを次のように変更しました:




コードをコピー


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


成功!