preventDefault
是一個 JavaScript 方法,用于取消特定事件的默認動作。在處理鍵盤事件時,這個方法可以幫助我們控制或限制某些按鍵的默認行為。例如,當用戶在輸入框中按下 Enter 鍵時,默認情況下會觸發表單提交。但在某些場景下,我們希望建立自定義的處理邏輯,而不是讓瀏覽器執行默認操作。這時候,就可以使用 preventDefault
方法來實現。
以下是一個簡單的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="myInput" />
<script>
const input = document.getElementById('myInput');
input.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault(); // 取消 Enter 鍵的默認行為(表單提交)
console.log('Enter 鍵被按下,但默認行為已被取消');
}
});
</script>
</body>
</html>
在這個示例中,當用戶在輸入框中按下 Enter 鍵時,通過調用 event.preventDefault()
,我們取消了表單提交的默認行為,并在控制臺打印了一條消息。這樣,用戶按下 Enter 鍵時,只會看到控制臺的輸出,而不會觸發表單提交。