目次
1. Keydown: キーボードのいずれかのキーが押されるとトリガーされます。
2. Keyup: キーボード上のいずれかのキーが放されるとトリガーされます。
3. キー押下: 文字を生成できるキーが押されて離されたときにトリガーされます (ファンクション キーなどを除く)。
4. 入力: テキスト入力ボックスまたは編集可能な要素の内容が変更されるとトリガーされます (キーボード入力、貼り付け、切り取りなどを含む)。
5.Compositionstart:中国語入力が開始されるとトリガーされます。
6. 構成更新: 中国語を入力する場合、文字が入力されるたびにトリガーされます。
この記事では、JavaScript のキーボード イベントについて簡単に紹介します。
1. Keydown: キーボードのいずれかのキーが押されるとトリガーされます。
keydown イベントは、キーボードのキーの押下に応答するために JavaScript で使用されます。これは、次のシナリオを実装するためによく使用されます。
1. ユーザーのキー操作をキャプチャする: keydown イベントをリッスンすることでユーザーが押したキーをキャプチャし、対応する操作を実行できます。たとえば、keydown イベントをリッスンすることでユーザーが特定のショートカット キーを押したことを検出し、対応する機能を実行できます。
2. フォーム入力制御: keydown イベントを使用してユーザー入力を制御できます。たとえば、keydown イベントをリッスンして、ユーザーが押したキーが数字キーであるか文字キーであるかを判断し、入力内容を数字または文字のみに制限することができます。
キーダウンイベントの例:
<script type="text/javascript">
document.addEventListener("keydown", function(event) {
// 判断按下的键是否是回车键（键码为13）
if(event.keyCode === 13) {
// 执行相应的操作，例如提交表单或执行搜索功能
console.log("Enter key pressed!");
// 在这里可以添加具体的逻辑代码
}
});
</script>2. Keyup: キーボード上のいずれかのキーが放されるとトリガーされます。
keyup イベントは、キーボードがキーを放したことに応答するために JavaScript で使用されます。これは、次のシナリオを実装するためによく使用されます。
1. ユーザーのキーボードリリース操作をキャプチャする: keyup イベントをリッスンすることでユーザーがリリースしたキーをキャプチャし、対応する操作を実行できます。たとえば、ゲーム開発では、キーアップ イベントを使用して、プレーヤーが特定のキーを放したことを検出し、ゲームの状態を更新したり、対応するアクションを実行したりできます。
2. フォーム入力制御: Keyup イベントを使用して、ユーザー入力をリアルタイムで制御および検証できます。たとえば、keyup イベントをリッスンし、入力ボックスでキーを放した後のユーザーの入力を検出し、入力の正当性チェックやリアルタイム検索などの操作を実行できます。
<script type="text/javascript">
// 监听键盘的keyup事件
document.addEventListener("keyup", function(event) {
// 判断释放的键是否是回车键（键码为13）
if(event.keyCode === 13) {
// 执行相应的操作，例如提交表单或执行搜索功能
console.log("Enter key released!");
// 在这里可以添加具体的逻辑代码
}
});
</script>3. キー押下: 文字を生成できるキーが押されて離されたときにトリガーされます (ファンクション キーなどを除く)。
keypress イベントは、キーボードのキー操作に応答するために JavaScript で使用され、キーが押されたときにトリガーされます。これは、次のシナリオを実装するためによく使用されます。
1. ユーザーのリアルタイム入力を監視する: キー押下イベントをリッスンすることでユーザーのリアルタイム入力を取得し、それを処理できます。たとえば、インスタント チャット アプリケーションでは、keypress イベントを使用してユーザーの入力をリアルタイムで取得し、チャット ウィンドウに表示できます。
2. ショートカット キー操作の実装: keypress イベントを使用して、ユーザーが特定のショートカット キーを押していることをキャプチャし、対応する操作を実行できます。たとえば、テキスト エディターでは、keypress イベントを使用して、ユーザーが Ctrl+S キーの組み合わせを押してドキュメントをすばやく保存するのをリッスンできます。
キー押下イベントは、ファンクション キーやキーの組み合わせなど、特定の状況下ではすべてのキー押下をキャプチャできない場合があることに注意してください。このような場合、完全なキーボード操作を実現するには、他のイベント (キーダウンやキーアップなど) を組み合わせる必要がある場合があります。
<script type="text/javascript">
// 监听键盘的keypress事件
document.addEventListener("keypress", function(event) {
// 获取按下的键对应的字符
var char = String.fromCharCode(event.which);
// 显示用户的输入内容
var userInput = document.getElementById("user-input");
userInput.textContent += char;
});
</script>最後に、キーボード ボタンをクリックする動作が実行されるとき、上記の 3 つのイベントのトリガー シーケンスは次のとおりです。
キーダウン -> キープレス -> キーアップ
4. 入力: テキスト入力ボックスまたは編集可能な要素の内容が変更されるとトリガーされます (キーボード入力、貼り付け、切り取りなどを含む)。
input イベントは、JavaScript で入力ボックス (input) またはテキスト領域 (textarea) の内容のリアルタイムの変更を監視するために使用されます。これは、次のシナリオを実装するためによく使用されます。
1. リアルタイム検索プロンプト: 入力イベントをリッスンすることで、リアルタイム検索プロンプトを実装できます。ユーザーが検索ボックスに内容を入力すると、入力ごとに入力イベントがトリガーされ、入力ボックスの値を取得することで検索操作を実行でき、検索結果がリアルタイムに表示されます。
2. フォーム検証：入力イベントを利用して、ユーザーのフォーム入力ボックスへの入力内容の変化を監視し、リアルタイムでフォーム検証を行うことができます。たとえば、入力イベントをリッスンしてパスワードの強度を確認することができ、ユーザーがパスワードを入力すると、パスワードの強度を求めるプロンプトがリアルタイムで表示されます。
次の例では、ユーザーが入力ボックスに内容を入力すると、入力された文字数がリアルタイムでカウントされ、ページに表示されることを実現します。
<body>
<input type="text" id="input-field">
<div id="char-count"></div>
</body>
<script>
var inputField = document.getElementById("input-field");
var charCount = document.getElementById("char-count");
inputField.addEventListener("input", function(event) {
var inputValue = event.target.value;
var count = inputValue.length;
charCount.textContent = "字符数量：" + count;
});
</script>5.Compositionstart:中国語入力が開始されるとトリガーされます。
Compositionstart イベントは、ユーザーが間接文字の入力 (中国語の入力方法の入力など) を開始するとトリガーされます。通常、インプットメソッドが関連処理のために文字の入力を開始するタイミングを捕捉するために使用されます。
現在、中国語入力監視イベントの監視は Microsoft 独自の Microsoft Pinyin 入力メソッドにのみ適用されているようで、Sogou などのサードパーティの入力メソッドではこのイベントをトリガーできないことに注意してください。
以下は例です。ユーザーが中国語の入力方法を使用して入力すると、compositionstart イベントをリッスンして、コンソールにプロンプト情報を出力します。
<body>
<input type="text" id="input-field">
</body>
<script>
var inputField = document.getElementById("input-field");
inputField.addEventListener("compositionstart", function(event) {
console.log("输入法开始输入字符");
});
</script>6. 構成更新: 中国語を入力する場合、文字が入力されるたびにトリガーされます。
Compositionupdate イベントは、ユーザーが間接文字 (中国語の入力方法の入力など) を入力しているときにトリガーされます。通常、入力中の文字をキャプチャし、関連情報を更新するために使用されます。
以下は例です。ユーザーが中国語の入力方法を使用して入力すると、compositionupdate イベントをリッスンし、入力された文字をコンソールに表示します。
<body>
<input type="text" id="input-field">
</body>
<script>
var inputField = document.getElementById("input-field");
inputField.addEventListener("compositionupdate", function(event) {
var inputText = event.data;
console.log("正在输入字符: " + inputText);
});
</script>実際の効果:
7. 構成終了: 中国語入力が終了するとトリガーされます。
ユーザーが間接文字の入力 (中国語の入力方法の入力など) を完了すると、compositionend イベントがトリガーされます。通常、入力完了後に文字や関連情報をキャプチャするために使用されます。
以下は例です。ユーザーが中国語の入力方法を使用して入力を完了すると、compositionend イベントをリッスンして、入力された文字をコンソールに表示します。
<body>
<input type="text" id="input-field">
</body>
<script>
var inputField = document.getElementById("input-field");
inputField.addEventListener("compositionend", function(event) {
var inputText = event.data;
console.log("输入完成的字符: " + inputText);
});
</script>実際の効果:
