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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。