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

更新时间：2009年12月09日 22:28:47 作者：

今天在写一个网页的时候用到了N多嵌套在textarea标签里的代码，定义双击运行其内的代码段。但是每次创建一个这样的可运行的实例都要给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>  <div id="testdiv"> </div> <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>  <div id="testdiv"> </div> <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需再刷新一下页面才能执行]

您可能感兴趣的文章:

Webpack中Source Map配置深入解析
这篇文章主要为大家介绍了Webpack中Source Map配置深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
parabola.js抛物线与加入购物车效果的示例代码
本篇文章主要介绍了parabola.js抛物线与加入购物车效果的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
编写高性能Javascript代码的N条建议
JavaScript代码在web应用程序中经常用到，但是很多开发者忽视了一些性能方面的知识，如何编写高性能javascript代码呢？接下来，小编跟大家一起学习
2015-10-10
jquery+css3实现网页背景花瓣随机飘落特效
在qq空间可以自定义一些插件，装饰空间，大家通常就是复制代码到空间粘贴，会实现非常美观的效果，有的会随机飘落一些花瓣，那么这种效果用代码怎么实现的呢，下面小编给大家详解jquery实现网页背景花瓣随机飘落特效，需要的朋友可以参考下
2015-08-08
JavaScript中通过prototype属性共享属性和方法的技巧实例
这篇文章主要介绍了JavaScript中通过prototype属性共享属性和方法的技巧实例,本文直接给出一个代码实例,需要的朋友可以参考下
2015-03-03
uniapp实现单选框的示例代码
本文给大家介绍uniapp实现单选框的示例代码,采用uniapp-vue3实现的一款单选框组件,提供丝滑的动画选中效果,支持不同主题配置,适配web、H5、微信小程序,感兴趣的朋友跟随小编一起看看吧
2024-03-03
微信小程序实现通讯录列表展开收起
这篇文章主要为大家详细介绍了微信小程序实现通讯录列表展开收起，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JavaScript清空数组的四种方法
这篇文章主要介绍了JavaScript清空数组的四种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-03-03
javascript克隆元素样式的实现代码
这是一个实验用的玩意，它可以克隆指定元素的最终样式，并包装成一个css类，它还可以证明Oprea 11.10 是个混球
2011-10-10
bootstrap网格系统使用方法解析
这篇文章主要为大家详细解析了bootstrap网络系统使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01