当前位置:首页 > jquery

jquery回车事件

2026-02-03 17:09:27jquery

jQuery 监听回车事件的方法

在 jQuery 中监听回车事件通常通过监听键盘事件(keypresskeydown)并检查按下的键码是否为回车键(13)来实现。

基本实现方式

jquery回车事件

$(document).on('keypress', function(e) {
    if (e.which === 13) {
        // 回车键被按下时执行的代码
        console.log('回车键被按下');
    }
});

针对特定输入框的监听

$('#inputId').on('keypress', function(e) {
    if (e.which === 13) {
        // 当在指定输入框中按下回车时执行的代码
        $(this).blur(); // 示例:移除输入框焦点
    }
});

使用 keydown 替代 keypress 某些情况下 keypress 可能不被支持,可以使用 keydown 事件:

jquery回车事件

$('#inputId').on('keydown', function(e) {
    if (e.keyCode === 13) {
        // 处理回车事件
        e.preventDefault(); // 阻止默认行为(如表单提交)
    }
});

现代浏览器推荐写法 较新版本的 jQuery 和浏览器支持 key 属性:

$('#inputId').on('keydown', function(e) {
    if (e.key === 'Enter') {
        // 更语义化的判断方式
    }
});

表单提交场景 若需要阻止回车键触发表单提交:

$('form').on('keypress', function(e) {
    if (e.which === 13 && !$(e.target).is('textarea')) {
        e.preventDefault();
        // 自定义提交逻辑
    }
});

注意事项

  • 键盘事件会冒泡,需注意事件委托场景
  • 移动端设备可能存在兼容性问题
  • keyCodewhich 已被废弃,推荐使用 key 属性
  • 在表单中使用时要考虑浏览器默认行为

标签: 事件jquery
分享给朋友:

相关文章

jquery官网

jquery官网

jQuery 官网信息 jQuery 的官方网站是 jQuery.com,提供最新的 jQuery 版本下载、文档、教程和插件资源。 官网主要功能 下载 jQuery:提供压缩版(minifi…

jquery文档

jquery文档

以下是关于 jQuery 文档的核心资源和使用方法整理: jQuery 官方文档 jQuery 官方文档是学习和使用 jQuery 最权威的资源,包含详细的 API 说明、示例和更新日志。…

react 如何引入jquery

react 如何引入jquery

引入 jQuery 到 React 项目 在 React 项目中引入 jQuery 可以通过多种方式实现,但需要注意 React 和 jQuery 操作 DOM 的方式可能冲突,因此建议仅在必要时使用…

jquery 面试题

jquery 面试题

jQuery 面试题常见考点 DOM 操作 选择器使用:$("#id"), $(".class"), $("tag") 元素增删改查:append(), remove(), html(),…

jquery获取radio选中的值

jquery获取radio选中的值

获取radio选中的值 使用jQuery获取被选中的radio按钮的值可以通过以下几种方法实现: 方法1:使用:checked选择器 var selectedValue = $('input[…

jquery作用

jquery作用

jQuery的作用概述 jQuery是一个快速、简洁的JavaScript库,主要用于简化HTML文档遍历、事件处理、动画设计和Ajax交互等操作。其核心目标是让开发者以更少的代码完成更多功能,同时解…