jQueryでキーボードイベントを取得する簡単な方法

jQueryでキーボードイベントを取得する簡単な方法_jquery

WBOY

リリース： 2016-05-16 15:18:37

オリジナル

1473 人が閲覧しました

この記事の例では、jQuery がキーボードイベントを単純に取得する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

1. キーボードイベントはいつ取得する必要がありますか? Web で作業するとき、より人間的な設計のために、キーボードイベントを使用することがあります。例: 入力ボックスドロップダウンプロンプトボックス、上下のキーボードを使用して必要なコンテンツを選択する場合、Google の入力ボックスドロップダウンプロンプトボックス。フォトアルバムを参照するときは、キーボードの左右のキーを使用して写真を表示できます。長い小説を閲覧する場合、マウスでスクロールするとどの行を読めばよいのか分からなくなりがちです。これらの細かい部分も、キーボードの上下キーを使用して行うことができます。ウェブサイトの作成は細部に大きく依存します。

2. jqueryのキーボード関数の種類

1. keydown イベントは、キーボードが押されたときにトリガーされるイベントです

2. keyup イベントは、キーが押されてキーが放されたときにトリガーされるイベントです

3. keypress イベントは、キーボードが押されたときにトリガーされるイベントです

キープレスとキーダウンは同様の機能を持ちますが、イベントの内容を取得する点が異なります。

2. 例

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr" lang="utf-8">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="jquery-1.3.2.js" type="text/javascript"></script>
</head>
<body>
<input value="fi" name="search" id="search_input" maxlength="50" autocomplete="off">
</body>
</html>
<script type="text/javascript">
 $('#search_input')
 .keypress(function(event){
 alert("keypress");
 })
 .keydown(function(event){
 alert("keydown");
 })
 .keyup(function(event){
 alert("keyup");
 });
</script>

ログイン後にコピー

3. テスト結果

1. 上の入力ボックスに文字 r を入力すると、初めてキーダウンが表示され、以降はキーを押すよう求められます。

2. pg dn銉を押すと、最初にキーアップが表示され、次にキーダウンが表示されます

3.shift+cを押すと、keypress
のみがポップアップします。 4. Ctrl+Alt を押すと、最初に 2 つのキーダウンが表示され、2 回目にキーアップが表示され、次にキーダウンが表示されます。
多くの可能性がありますが、一般的に使用されるフェニックスを試してみる必要があります。

4. キーボードイベント

に対応する ASCII 値を取得します。

jQuery イベント操作に関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「

<script type="text/javascript">
 $('#search_input')
 .keydown(function(event){
 alert(event.keyCode);
 })
</script>

ログイン後にコピー

jQuery の一般的なイベントの使用法とテクニックの概要

」

を参照してください。この記事が jQuery プログラミングのすべての人に役立つことを願っています。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

jQueryでキーボードイベントを取得する簡単な方法_jquery