javascript实现的textarea运行框效果代码不用指定id批量指定

刚学了点DOM节点树的操作方法和属性，边尝试着写一个不用手动设置id和双击事件的例子，折腾了N久终于弄出了摸样来了，代码如下：（说明：双击运行文本框里的代码，右击复制其内的代码，另存为*.htm文件即可测试）

<html> <head><title>textarea运行框效果</title> <style>textarea {width:100%;height:200px;font-family:"fixedsys";overflow-y:hidden;} </style> <script> /************************************************************************************************************************************ *copyright （C） ymk18@163.com QQ:334150781 URL http://hi.baidu.com/ymk18 欢迎交流 共同学习 共同探讨 共同进步 2009-05-04 PM 19:17 *************************************************************************************************************************************/ window.onload = function（） { //把此函数绑定到onload事件上 var textarea = document.getElementsByTagName（"textarea"）; //把所有textarea元素存入数组变量textarea for （var i=0;i<textarea.length;i++） { //遍历该数组变量textarea textarea[i].setAttribute（"id",i）; //设置每个textarea元素的id属性 textarea[i].style.posHeight = textarea[i].scrollHeight; //重置高度值使textarea元素高度自适应，重要样式height:200px; textarea[i].ondblclick = function（） { //自定义鼠标双击事件 runCode（this.id）; //调用运行代码函数 } textarea[i].oncontextmenu = function（） { //自定义鼠标右击事件 this.select（）; //右击对象中的文本选中效果 copyCode（this.id）; //调用复制代码函数 return false; //拦截浏览器默认行为 } } } //运行代码 function runCode（getId） { var code=document.getElementById（getId）.firstChild.nodeValue; if （code！=""）{ var newwin=window.open（"","",""）; newwin.opener = null newwin.document.write（code）; newwin.document.close（）; } } //复制代码 function copyCode（getId） { var text=document.getElementById（getId）.firstChild.nodeValue; window.clipboardData.setData（"Text",text）; alert（"内容已经复制到剪切板！"）; } //保存代码 function saveCode（getId） { var code=document.getElementById（getId）.firstChild.nodeValue; var winname = window.open（"", "_blank", "top=10000"）; winname.document.open（"text/html", "replace"）; winname.document.writeln（code）; winname.document.execCommand（"saveas","","code.htm"）; winname.close（）; } </script> </head> <body> <textarea><script> var para = document.createElement（"p"）; //创建一个p元素节点并赋值给para变量 alert（para.nodeName）; //显示元素节点的名字 alert（para.nodeType）; //nodeType的值若为1->元素节点；2->属性节点；3->文本节点 </script></textarea> <textarea><script> window.onload = function（） { var para = document.createElement（"p"）; var txt1 = document.createTextNode（"I inserted "）; para.appendChild（txt1）; var emphasis = document.createElement（"em"）; var txt2 = document.createTextNode（"this"）; emphasis.appendChild（txt2）; para.appendChild（emphasis）; var txt3 = document.createTextNode（" content."）; para.appendChild（txt3）; var testdiv = document.getElementById（"testdiv"）; testdiv.appendChild（para）; } </script></textarea> <textarea><script> window.onload = function（） { var para = document.createElement（"p"）; var txt1 = document.createTextNode（"I inserted "）; var emphasis = document.createElement（"em"）; var txt2 = document.createTextNode（"this"）; var txt3 = document.createTextNode（" content."）; para.appendChild（txt1）; emphasis.appendChild（txt2）; para.appendChild（emphasis）; para.appendChild（txt3）; var testdiv = document.getElementById（"testdiv"）; testdiv.appendChild（para）; } </script></textarea> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

首页 / 脚本样式 / JavaScript / javascript实现的textarea运行框效果代码 不用指定id批量指定

首页 / 脚本样式 / JavaScript / javascript实现的textarea运行框效果代码不用指定id批量指定