jQuery keydown事件

jQuery keydown is one of the keyboard event methods. Other jQuery keyboard event methods are keyup and keypress.

jQuery keydown是键盘事件方法之一。其他jQuery键盘事件方法是keyup和keypress。

jQuery按键 (jQuery keydown)

jQuery keydown method triggers when you first press a key on the keyboard and hold it. You can attach functions to execute when this event occurs.

首次按下键盘上的某个键并按住时，jQuery keydown方法将触发。您可以附加函数以在发生此事件时执行。

jQuery keydown方法语法 (jQuery keydown method syntax)

keydown(): This jQuery keydown method is used without any arguments.keydown（）：此jQuery keydown方法使用时不带任何参数。
keydown(handler): This jQuery keydown method attaches a function to be executed when the keydown event is fired.keydown（handler）：此jQuery keydown方法附加了触发keydown事件时要执行的功能。

jQuery keydown示例 (jQuery keydown example)

Following example demonstrates the use of jQuery keydown method.

以下示例演示了jQuery keydown方法的使用。

jquery-keydown.html

<!DOCTYPE html>
<html>
<head>
<title>jQuery keydown event example</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){$("input:text").keyup(function(){$("input:text").css("background-color","red");});
$("input:text").keydown(function(){$("input:text").css("background-color","green");});
$("input:text").keypress(function(){$("input:text").css("background-color","yellow");});//reset jQuery keydown css$("input:reset").click(function(){$("input:text").css("background-color","white");});
});
</script>
</head>
<body>
<h3>jQuery keydown example</h3>
Enter anything: <input type="text">
<input type="reset">
<br><br>
Type something above and hold the key, background colour will change to Green.
<br><br>
Click on Reset button to try again.
</body>
</html>

In above example, when the key is pressed and hold, keydown() method is triggered which in turn executes the function that changes the background colour to green.

在上面的示例中，当按住键时，将触发keydown（）方法，该方法又执行将背景颜色更改为绿色的功能。

Below screencast shows above jQuery keydown example in action.

下面的截屏视频显示了上面运行的jQuery keydown示例。

jQuery keydown演示 (jQuery keydown demo)

演示地址

翻译自: https://www.journaldev.com/13176/jquery-keydown-event