当前位置：首页 > JavaScript

js实现enter

2026-04-05 06:22:02JavaScript

监听 Enter 键事件

在 JavaScript 中，可以通过监听键盘事件来检测用户是否按下了 Enter 键。以下是实现方法：

document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        // 执行 Enter 键按下后的操作
        console.log('Enter key pressed');
    }
});

表单提交时监听 Enter 键

对于表单输入框，通常需要在按下 Enter 键时触发表单提交：

const inputField = document.getElementById('inputField');
inputField.addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault(); // 阻止默认行为（如表单提交）
        // 执行自定义操作
        console.log('Enter key pressed in input field');
    }
});

使用 keyCode 或 which（兼容旧浏览器）

如果需要兼容旧版本浏览器，可以使用 keyCode 或 which 属性：

document.addEventListener('keydown', function(event) {
    if (event.keyCode === 13 || event.which === 13) {
        console.log('Enter key pressed (using keyCode/which)');
    }
});

在 React 中监听 Enter 键

在 React 中，可以通过 onKeyDown 事件监听 Enter 键：

function handleKeyDown(event) {
    if (event.key === 'Enter') {
        console.log('Enter key pressed in React');
    }
}

// 在组件中使用
<input type="text" onKeyDown={handleKeyDown} />

在 Vue 中监听 Enter 键

在 Vue 中，可以使用 @keydown.enter 修饰符：

<template>
    <input type="text" @keydown.enter="handleEnter" />
</template>

<script>
export default {
    methods: {
        handleEnter() {
            console.log('Enter key pressed in Vue');
        }
    }
};
</script>

阻止默认行为

如果需要阻止 Enter 键的默认行为（如表单提交），可以使用 event.preventDefault()：

js实现enter

document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault();
        console.log('Default behavior prevented');
    }
});