当前位置：首页 > JavaScript

js实现回车

2026-04-06 05:54:33JavaScript

监听回车键事件

在JavaScript中，可以通过监听键盘事件来检测回车键（Enter键）的按下。回车键的keyCode是13，也可以使用event.key或event.code来检测。

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

在输入框中监听回车

如果需要在特定的输入框或文本域中监听回车键，可以将事件监听器绑定到该元素上。

const inputElement = document.getElementById('myInput');
inputElement.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        console.log('在输入框中按下回车键');
        // 执行操作，如提交表单或触发搜索
    }
});

阻止表单默认提交行为

在表单中使用回车键时，默认会触发表单的提交行为。如果需要阻止默认行为，可以使用event.preventDefault()。

js实现回车

const formElement = document.getElementById('myForm');
formElement.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault();
        console.log('阻止表单默认提交行为');
        // 自定义操作
    }
});

使用事件委托监听动态元素

对于动态生成的元素，可以使用事件委托来监听回车键事件。

document.addEventListener('keydown', function(event) {
    if (event.target.matches('.dynamic-input') && event.key === 'Enter') {
        console.log('动态元素上的回车键事件');
        // 执行操作
    }
});

结合React或Vue框架

在React或Vue等前端框架中，监听回车键的方式类似，但语法略有不同。

js实现回车

React示例：

function handleKeyDown(event) {
    if (event.key === 'Enter') {
        console.log('React中回车键被按下');
    }
}

return <input onKeyDown={handleKeyDown} />;

Vue示例：

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

<script>
export default {
    methods: {
        handleEnter() {
            console.log('Vue中回车键被按下');
        }
    }
}
</script>

标签: js