ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScript にはいくつかのキーボード イベントがあります

JavaScript にはいくつかのキーボード イベントがあります

青灯夜游
青灯夜游オリジナル
2022-02-17 18:15:043675ブラウズ

JavaScript には 3 種類のキーボード イベントがあります: 1. キーボード上の特定のキーが押されたときにトリガーされる keydown イベント、2. キーボードの特定のキーが押されて放されたときにトリガーされる keypress イベント、2. キーボード上の特定のキーが押されたときにトリガーされる keypress イベント。 3. keyup イベント。キーボードのキーが放されたときに発生します。

JavaScript にはいくつかのキーボード イベントがあります

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript では、ユーザーがキーボードを操作するとキーボード イベントがトリガーされます。

キーボード イベントには主に次の 3 種類があります。

  • keydown: キーボード トリガーでキーが押されたとき。キーを押し続けると、このイベントは継続的にトリガーされますが、Opera ブラウザーはこの継続的な操作をサポートしていません。イベント ハンドラーが false を返すと、デフォルトのアクション (キーボード文字の入力、IE および Safari ブラウザーでのキー押下イベントの応答など) がキャンセルされます。

  • keypress: キーボードのキーが押されて放されたときにトリガーされます。キーが押されると、このイベントが継続的にトリガーされます。イベント ハンドラーが false を返すと、デフォルトのアクション (キーボード文字の入力など) がキャンセルされます。

  • keyup: キーボードのキーが放されたときにトリガーされます。このイベントは、キーボードが放されたときに 1 回だけトリガーされ、継続的な応答状態ではありません。

ユーザーが押しているキー コードを取得する場合、keydown、keypress、keyup イベントを使用してこの情報を取得できます。 keydown イベントと keypress イベントは基本的に同義のイベントであり、そのパフォーマンスはまったく同じですが、ブラウザによっては keypress イベントを使用してキー情報を取得することが許可されていません。すべての要素はキーボード イベントをサポートしますが、キーボード イベントは主にフォーム入力で使用されます。

次の例では、キーボード操作のさまざまな詳細、つまりキーボード応答イベント タイプと対応するキーの値をリアルタイムでキャプチャします。

<textarea id="key"></textarea>
<script>
    var key = document.getElementById("key");
    key.onkeydown =f;  //注册keydown事件处理函数
    key.onkeyup = f;  //注册keyup事件处理函数
    key.onkeypress = f;  //注册keypress事件处理函数
    function f (e) {
        var e = e || window.event;  //标准化事件处理
        var s = e.type + " " + e.keyCode;  //获取键盘事件类型和按下的值
        key.value = s;
    }
</script>

キーボード イベント プロパティ

キーボードでは、次の表に示すように、多くのプロパティが定義されます。これらのプロパティを使用して、キーボード操作を正確に制御します。キーボード イベント プロパティは、通常、キーボード関連のイベントが発生したときにのみイベント オブジェクトに存在します。ただし、ctrlKey プロパティとShiftKey プロパティは除きます。これらのプロパティは保水イベントに存在する可能性があるためです。たとえば、Ctrl キーまたは Shift キーを押すとマウス クリックが発生します。

#キーボード イベントによって定義された属性AttributesDescriptionkeyCodeこの属性には、キーボードの対応するキー位置のキー値が含まれますcharCodeこの属性には、キーボードの対応するキー位置の Unicode エンコードが含まれます。 DOM のみでサポートtargetイベントが発生するノード (要素を含む)、DOM のみがサポート #srcElement イベント発生要素、IE のみサポートshiftKeyShift キーが押されているかどうか。押されていれば true を返し、押されていない場合は false を返します。 ctrlKeyCtrl キーが押されているかどうか、押されていれば true を返し、押されていない場合は falsealtKeyAlt キーが押されているかどうか、押された場合は true を返し、それ以外の場合は false を返します。metaKeyMtea キーが押されているかどうか、押されている場合は true を返し、それ以外の場合は false を返します。 、DOM のみサポート
[関連する推奨事項:

JavaScript 学習チュートリアル]

以上がJavaScript にはいくつかのキーボード イベントがありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。