本文介绍利用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> <!--代码实例--> <!--代码实例--> </textarea> <textarea> <!--代码实例--> <div id="testdiv"> </div> <!--代码实例--> </textarea> <textarea> <!--代码实例--> <div id="testdiv"> </div> <!--代码实例--> </textarea> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]