讲师中心 微信公众号

工具推荐

视频效率加速
Seko
Seko

AI短剧一键生成成片

updream

一键生成高质量推广成片

Laper
Laper

剧本策划到成片协作

AniShort
AniShort

AI短剧协同制作平台

layui表格怎么禁用双击选中文字的功能

落静君_2714

落静君_2714

发布时间:2026-11-12 10:13:17

|

311人浏览过

|

来源于php中文网

原创

Layui表格单元格默认不支持双击选中文字,因td为不可编辑纯展示内容;意外选中通常由contenteditable="true"、tabindex或user-select: text等无意激活焦点/编辑态导致,需检查并移除相关属性或样式。

layui表格怎么禁用双击选中文字的功能

layui 表格单元格默认不支持双击选中文字,但如果你发现双击时文字被意外选中(比如出现蓝色高亮),那通常是因为浏览器对可聚焦/可编辑内容的默认行为被意外激活了——不是 layui 主动加的,而是你或 CSS 无意中触发了它。

为什么双击会选中文字

根本原因是:某个 <td> 或其子元素被设了 <code>contenteditable="true"、tabindex、或 CSS 中启用了 user-select: text 且该元素恰好能获得焦点。Layui 渲染的单元格默认是纯 <div lay-unselect> 包裹文本,浏览器不会主动选中;一旦打破这个“只读无焦点”状态,双击就可能触发原生文本选择。 <h3>检查并移除 contenteditable 属性</h3> <p>这是最常见也最隐蔽的诱因。哪怕只是某列用了 <code>templet 并手写了 <div contenteditable="true">(比如为实现点击全选),双击就会选中文本。 <ul><li>用浏览器开发者工具检查目标 <code><td> 及其子 <code><div>,确认没有 <code>contenteditable 属性

  • 如果确需 contenteditable(如自定义编辑),必须在双击时阻止默认行为:event.preventDefault(),且不要依赖 user-select 控制选中
  • 别写 contenteditable="" 或 contenteditable="false" —— 后者在部分浏览器中仍会被当作 true 解析
  • 禁用 user-select 但保留可点击性

    单纯加 user-select: none 会同时禁掉所有文本选择(包括用户想复制时),更稳妥的做法是只对非输入场景禁用:

    深蓝色网站后台管理系统layui框架模板-AdminPro
    深蓝色网站后台管理系统layui框架模板-AdminPro

    一款深蓝色网站后台管理系统layui框架模板

    下载
    • 给表格容器加 CSS:.layui-table td { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
    • 但要排除真正需要文本操作的列(如备注列):.layui-table .note-col { user-select: text; }
    • 注意:IE10+ 和现代浏览器都支持,无需额外 polyfill

    拦截 rowDouble 事件避免误触发

    如果你监听了 rowDouble 但没做任何事,用户双击时浏览器可能把焦点落到某个文本节点上,进而触发选中。即使没逻辑,也要显式终止事件传播:

    • 在 table.on('rowDouble(filter)', function(obj){ ... }) 回调里第一行加 layui.stope(event)
    • 别写 return false —— 它只阻止回调执行,不阻止浏览器默认行为
    • 如果用了 templet 渲染按钮等交互元素,确保它们的 lay-event 不会冒泡到 <tr> 上(加 <code>layui.stope(event) 在 tool 回调开头)

      真正容易被忽略的是:禁用选中不是靠“关掉某个开关”,而是持续维护单元格的“不可编辑、不可聚焦、不可选中”三重状态。只要其中一环松动(比如某次 reload 后忘了清掉 contenteditable,或新模板漏了 lay-unselect),双击选中就会重现。

    相关文章

    相关标签:

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门AI工具

    更多
    UpDream
    UpDream Hot

    一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

    超级麦吉

    一款通过数字员工协作完成调研、数据分析与文档制作的AI办公平台。

    DeepSeek

    DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

    创客贴AI

    创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

    蛙蛙写作

    一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

    讯飞智作

    讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

    Atoms
    Atoms Hot

    Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

    WorkBuddy

    一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

    豆包大模型

    豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

    相关专题

    更多
    python是前端还是后端
    python是前端还是后端

    Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

    2963

    2023.08.11

    前端如何实现即时通讯
    前端如何实现即时通讯

    实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

    6503

    2023.10.09

    前端和后端的区别
    前端和后端的区别

    前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

    7350

    2024.03.19

    php和前端的关联介绍
    php和前端的关联介绍

    php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

    7238

    2024.03.22

    前端外包工作内容有哪些
    前端外包工作内容有哪些

    前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

    1023

    2024.05.22

    html5动画制作有哪些制作方法
    html5动画制作有哪些制作方法

    html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

    4811

    2023.10.23

    HTML与HTML5的区别
    HTML与HTML5的区别

    HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

    8628

    2024.03.06

    html5从入门到精通汇总
    html5从入门到精通汇总

    想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

    894

    2025.12.30

    Postman身份认证怎么配置
    Postman身份认证怎么配置

    本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

    80

    2026.11.06

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    相关下载

    更多

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    ThinkPHP配置开发与CMS后台实战
    ThinkPHP配置开发与CMS后台实战

    共87课时 | 13.2万人学习

    第二十三期_综合实战
    第二十三期_综合实战

    共89课时 | 11.5万人学习

    Layui 快速入门精讲
    Layui 快速入门精讲

    共5课时 | 1.6万人学习

    最新文章

    更多

    PDF工具

    更多
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn