JavaScript实现无需指定ID的批量Textarea运行框

作者:半夏

时间:2026-10-24

浏览:365

本文介绍利用DOM节点树操作实现无需手动设置ID的批量Textarea运行框效果。通过JavaScript脚本,用户可双击运行文本框内代码,右击复制内容,并支持保存为HTML文件进行测试。示例包含运行、复制及保存功能的按钮交互逻辑。

文章目录

JavaScript实现无需指定ID的批量Textarea运行框

在初步掌握DOM节点树的操作方法与属性后,尝试编写一个无需手动设置ID和双击事件的示例。经过多次调试,最终实现了基本功能,具体代码如下(说明:双击运行文本框里的代码,右击复制其内的代码,另存为*.htm文件即可测试)


<html> <head><title>textarea运行框效果</title> <style>textarea {width:100%;height:200px;font-family:"fixedsys";overflow-y:hidden;} </style>  </head> <body> <textarea> <!--代码实例-->  <!--代码实例--> <&#47textarea> <textarea> <!--代码实例--> <div id="testdiv"> </div>  <!--代码实例--> <&#47textarea> <textarea> <!--代码实例--> <div id="testdiv"> </div>  <!--代码实例--> <&#47textarea> </body> </html> 

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章