onclick、contenteditable、draggable和enterkeyhint是四个真正能省JS或大幅简化交互的HTML属性：onclick用于快速原型点击逻辑，contenteditable实现原生编辑，draggable开启拖放起点，enterkeyhint优化移动端软键盘语义。
直接用 HTML 属性就能让页面“动起来”，但不是所有属性都适合交互场景——onclick、contenteditable、draggable 和 enterkeyhint 这四个是真正能省掉 JS 逻辑或大幅简化交互代码的实用属性，其他如 title 或 required 主要服务可访问性或表单约束，不算“增强交互”。
onclick 属性：简单点击逻辑别写 JS 文件了
它不是过时方案，而是快速验证交互原型的首选。比如调试阶段给按钮加个 onclick="console.log('clicked')"，比写 addEventListener 再查 DOM 快得多。
- 只用于单次、无状态、副作用小的操作（如弹提示、切换 class、触发
location.href） - 避免在其中写多行逻辑或调用未定义函数，否则控制台报
ReferenceError - 不要和
addEventListener混用同一元素——后者会覆盖前者，且无法通过 HTML 查看绑定关系 - 如果要传参，用
onclick="handleClick('user-123')"，但注意引号嵌套：外双内单，或用转义
contenteditable 属性：让任意容器变成编辑区
不用引入富文本编辑器也能实现基础编辑，比如笔记卡片、待办描述字段、协作白板里的便签块。
- 设为
contenteditable="true"后，元素获得焦点、光标、复制粘贴、撤销重做（Ctrl+Z）等原生能力 - 值为
"plaintext-only"可禁用格式粘贴，防止用户粘贴带样式的 Word 内容污染结构 - 注意：它不触发
input事件，要用blur或keydown+setTimeout捕获最终值 - 安全风险：允许执行内联
<script></script>（若未过滤），生产环境务必对内容做 XSS 清洗
draggable 属性配合 ondragstart：拖放排序不用框架也能做
表格行拖拽排序、看板任务移动、文件上传区域预览——这些场景下，draggable="true" 是起点，但必须配 JS 的 ondragstart 才能传数据。
-
draggable本身只是开关，不提供任何样式或反馈；拖拽开始时浏览器自动触发ondragstart - 在
ondragstart里必须调用event.dataTransfer.setData()，否则拖到目标区域没效果 - 目标容器需监听
ondragover并调用event.preventDefault()，否则浏览器默认阻止放置 - 移动端不支持原生 drag API，得 fallback 到
touchstart/move/end，这点常被忽略
enterkeyhint 属性：移动端软键盘回车键语义化
它不改变功能，但改叔回车键文案，直接影响用户操作预期。搜索框显示 search，登录表单末尾显示 go，多步表单显示 next，比统一显示“回车”更自然。
- 仅作用于
和，且只在移动浏览器生效（Chrome Android、Safari iOS） - 值必须是规范枚举：
enter、done、go、next、previous、search、send - 不兼容旧版 WebView（如 Android 4.4 系统 WebView），但不影响输入功能，只是回车键保持默认文案
- 和
type属性协同：比如type="search"+enterkeyhint="search"效果最一致
真正难的是组合使用——比如一个 contenteditable 区域里嵌了可拖拽的标签，还要响应回车提交，这时各属性的事件优先级、冒泡路径、移动端兼容边界就全暴露出来了。动手前先想清楚：这个交互是否必须由 HTML 属性驱动，还是交给 JS 控制更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
