JQuery keypress()用法及代码示例

jQuery 中的 keypress() 方法用于触发 keypress 事件或附加一个函数在键盘某个键被按下时执行，即当 keypress 事件发生时。此方法可用于检查是否按下了任何键盘键。

此方法不考虑 Ctrl、Alt、Shift、Esc 等键盘按钮。我们可以使用 keydown() 方法来检查这些 key 。 keypress 事件类似于 keydown 事件。

用法

keypress() 方法使用或不使用任何参数。使用 keypress() 方法的语法如下：

触发按键事件

$(selector).keypress()

附加一个在按键事件发生时执行的函数

$(selector).keypress(function)

上述语法中提到的函数是可选参数。它指定按键事件触发时执行的函数。

让我们通过一些插图来了解 keypress() 方法的用法原理。

示例 1

在这个例子中，我们使用 keypress() 方法来计算用户在给定文本字段中输入的次数。在这里，有一个需要一些输入的文本字段。当用户在文本字段中写入内容时，每次都会对输入进行计数。

在这里，我们使用 keypress() 方法的可选参数。因此，该方法将在按下键时触发处理程序。它适用于除某些特殊键(如 Shift、Delete、Esc 等)之外的所有键盘键。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
var x = 0;
$(document).ready(function(){
  $("input").keypress(function(){
    $("span").text(x += 1);
  });
});
</script>
</head>
<body>
<h2> Welcome to the javaTpoint.com </h2>
<h3> It is an example of using the keypress() method </h3>

Enter something:<input type = "text">

<p> Key is pressed <span> 0 </span> times. </p>

</body>
</html>

输出

执行上述代码后，输出将是 -

在给定的文本字段中写入内容后，输出将是 -

例2

在此示例中，我们使用带有 handler 参数的 keypress() 事件来检测按键事件。一旦按下某个键，该方法将触发处理程序。当用户从键盘上单击一个键时，将显示一个警告框并显示一条消息。

尽管该方法会触发除某些特殊或非打印键(例如 Ctrl、Shift、Esc 等)之外的所有键的处理程序。

如果我们使用 keydown() 方法而不是使用 keypress() 方法，处理程序将触发键盘的所有键，包括特殊或非打印键。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
var x = 0;
$(document).keypress(function(){
    alert(" A key is pressed from a keyboard ");
});
</script>
</head>
<body>
<h2> Welcome to the javaTpoint.com </h2>
<h3> It is an example of using the keypress() method </h3>
<p> Click any key from your keyboard </p>

</body>
</html>

输出

执行上述代码后，输出将是 -

从键盘按下一个键后，输出将是 -

例3

这是使用 keypress() 方法的另一个示例。它与上面的示例类似，不同之处在于这里的警告框将显示从键盘按下了哪个键。

在这个例子中，我们使用 keypress() 方法来检测从键盘上按下了哪个键。该方法将触发所有键盘键的处理程序，除了一些特殊或不可打印的键。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script> 
$(document).keypress(function(e){ 
    var k = e.keyCode; 
    var ch = String.fromCharCode(k); 
        alert('The pressed key is:' + ch);     
}); 
</script> 
</head>
<body>
<h2> Welcome to the javaTpoint.com </h2>
<h3> It is an example of using the keypress() method </h3>
<p> Click any key from your keyboard </p>

</body>
</html>

输出

执行上述代码后，输出将是 -

从键盘按下一个键后，输出将是 -

与上面的屏幕截图类似，除了一些特殊键外，每个键都会显示警告框。

相关用法

注：本文由纯净天空筛选整理自 jQuery keypress() method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。