JavaScript实现Div可编辑的两种常见方案
本文介绍在网页中实现即时内容编辑的两种JavaScript方案。第一种利用CSS样式隐藏Textarea外观，结合onblur等事件触发AJAX保存；第二种通过动态创建Input元素覆盖原内容，点击保存按钮提交数据。文中提供了相关代码示例及实现思路，并指出第二种方法可能存在待调试的问题。
实现网页即时编辑的功能目标
该功能旨在实现网页内容的即时编辑，从而提升页面的可用性与交互体验。
方案一：基于Textarea的伪装编辑
第一种方法是通过直接使用textarea标签来实现，具体代码运行如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css"> #info { font-size: 12px; overflow:hidden; background-color: #ffffcc; color: black; padding-right:5px; padding-left:5px; font-family: courier; width:100%; letter-spacing:0; line-height:12px; border-style:none; } </style> </HEAD> <BODY> <div id="sdf" style="width:400px;"> <textarea id="info" onblur="saveInfo()" onmouseout="saveInfo()" onkeyup="setRows()"></textarea> </div> </BODY> </HTML> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
其核心思路是：利用CSS样式对textarea进行美化，使其外观不像是传统的文本框，并通过onblur、onmouseout等事件触发AJAX请求，以保存用户输入的数据。
方案二：基于动态Input的编辑实现
第二种方法则是利用document.createElement动态创建input元素并添加到页面中，具体代码运行如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <div id="gtest"> 点击这里就可以编辑 </div> </BODY> </HTML> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
实现思路如下：
1、当用户鼠标悬停在可编辑区域时，通过背景色变化等方式提示用户该区域支持编辑。
2、当用户点击该区域（触发onclick事件）时，先清空原有内容，然后动态生成一个输入框和一个保存按钮。
3、用户修改内容后，点击“保存”按钮，通过AJAX将新数据写入数据库。
注：第二种方法的代码尚存一些问题，后续需进一步调试完善。
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18