この記事では、主に JQuery の keyUp と keyDown の違いについて詳細な分析と紹介を提供します。必要な友達が来て参考になれば幸いです
定義と使用法
。押下プロセスは 2 つの部分に分かれています: 1. ボタンが押される、2. ボタンが放される。
keydown イベントは、ボタンが押されると発生します。
keydown() メソッドは、keydown イベントをトリガーするか、keydown イベントの発生時に実行する関数を指定します。
コードは次のとおりです:
<html>
<head>
<script type="text/
javascript
" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(
document
).ready(function(){
$("input").keydown(function(){
$("input").css("
background-color
","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
</body>
</html>
ご存知のとおり、jquery は多くのイベント対話メソッドをカプセル化しており、ここで説明した問題はネイティブ js にも存在します。
キーアップは、ユーザーがキーを離したときにのみトリガーされます。これは、キーを押すプロセス全体の最後の段階であるため、左側で入力し、右側で同期表示するプロセスで非常に役立ちます。 。典型的な例は、電子メール編集プレビューのアプリケーションです。
コードは次のとおりです:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#t1').live('keyup', function() {
$('#v1').text($(this).val());
});
$('#t2').live('keydown', function() {
$('#v2').text($(this).val());
});
$('#t3').live('keypress', function() {
$('#v3').text($(this).val());
});
});
</script>
</head>
<body>
<textarea id="t1"></textarea>
<p id="v1">
</p>
<textarea id="t2"></textarea>
<p id="v2">
</p>
<textarea id="t3"></textarea>
<p id="v3">
</p>
</body>
</html>
ここでは 3 つのイベントがそれぞれ適用されます。そのうち t1 は v1 に完全に同期できますが、keypress と keydown には常に最後の文字がありません。これは、これら 3 つのイベントのトリガーが次のとおりであることを示しています。小さな違いは、キーを押したときにキーダウンがトリガーされ、最終的な入力結果が取得できないことです。
例: keydown はテキスト ボックスにバインドされており、テキスト ボックスの値を取得するたびにイベントがトリガーされ、最後の操作時のテキスト ボックスの内容が常に出力されます。これは、キーダウン操作の後、イベントがトリガーされますが、値がテキスト ボックスに表示されていないためです。そのため、このタイプの操作では、テキスト ボックスの値を取得する前にキーアップによる完全なキーアップが必要です。
keydown と keypress は、キーボード制御を通じてページのような機能を実装するのに適しています。
キーボードのキーをクリックしてください:
コードは次のとおりです:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(event){
$("p").html("Key: " + event.which);
});
});
</script>
</head>
<body>自由に文字を入力してください:
テキストを入力するとき上のボックス、下の p にはキーのシーケンス番号が表示されます。