ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryでキーボードイベントを取得する簡単な方法_jquery
jQueryでキーボードイベントを取得する簡単な方法_jquery
- WBOYオリジナル
- 2016-05-16 15:18:371517ブラウズ
この記事の例では、jQuery がキーボード イベントを単純に取得する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
1. キーボードイベントはいつ取得する必要がありますか? Web で作業するとき、より人間的な設計のために、キーボード イベントを使用することがあります。例: 入力ボックス ドロップダウン プロンプト ボックス、上下のキーボードを使用して必要なコンテンツを選択する場合、Google の入力ボックス ドロップダウン プロンプト ボックス。フォト アルバムを参照するときは、キーボードの左右のキーを使用して写真を表示できます。長い小説を閲覧する場合、マウスでスクロールするとどの行を読めばよいのか分からなくなりがちです。これらの細かい部分も、キーボードの上下キーを使用して行うことができます。ウェブサイトの作成は細部に大きく依存します。
2. jqueryのキーボード関数の種類1. keydown イベントは、キーボードが押されたときにトリガーされるイベントです
2. keyup イベントは、キーが押されてキーが放されたときにトリガーされるイベントです
3. keypress イベントは、キーボードが押されたときにトリガーされるイベントです
キープレスとキーダウンは同様の機能を持ちますが、イベントの内容を取得する点が異なります。
<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>
1. 上の入力ボックスに文字 r を入力すると、初めてキーダウンが表示され、以降はキーを押すよう求められます。
2. pg dn銉を押すと、最初にキーアップが表示され、次にキーダウンが表示されます
3.shift+cを押すと、keypress
のみがポップアップします。
4. Ctrl+Alt を押すと、最初に 2 つのキーダウンが表示され、2 回目にキーアップが表示され、次にキーダウンが表示されます。
多くの可能性がありますが、一般的に使用されるフェニックスを試してみる必要があります。
4. キーボードイベント
に対応する ASCII 値を取得します。
<script type="text/javascript">
$('#search_input')
.keydown(function(event){
alert(event.keyCode);
})
</script>
jQuery の一般的なイベントの使用法とテクニックの概要を参照してください。 この記事が jQuery プログラミングのすべての人に役立つことを願っています。