javascript實現(xiàn)的textarea運行框效果代碼不用指定id批量指定

更新時間：2009年12月09日 22:28:47 作者：

今天在寫一個網(wǎng)頁的時候用到了N多嵌套在textarea標(biāo)簽里的代碼，定義雙擊運行其內(nèi)的代碼段。但是每次創(chuàng)建一個這樣的可運行的實例都要給textarea元素自定義一個id值和寫入雙擊事件，好不麻煩。

剛學(xué)了點DOM節(jié)點樹的操作方法和屬性，邊嘗試著寫一個不用手動設(shè)置id和雙擊事件的例子，折騰了N久終于弄出了摸樣來了，代碼如下：（說明：雙擊運行文本框里的代碼，右擊復(fù)制其內(nèi)的代碼，另存為*.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 歡迎交流 共同學(xué)習(xí) 共同探討 共同進步 2009-05-04 PM 19:17 *************************************************************************************************************************************/ window.onload = function() { //把此函數(shù)綁定到onload事件上 var textarea = document.getElementsByTagName("textarea"); //把所有textarea元素存入數(shù)組變量textarea for (var i=0;i<textarea.length;i++) { //遍歷該數(shù)組變量textarea textarea[i].setAttribute("id",i); //設(shè)置每個textarea元素的id屬性 textarea[i].style.posHeight = textarea[i].scrollHeight; //重置高度值使textarea元素高度自適應(yīng)，重要樣式height:200px; textarea[i].ondblclick = function() { //自定義鼠標(biāo)雙擊事件 runCode(this.id); //調(diào)用運行代碼函數(shù) } textarea[i].oncontextmenu = function() { //自定義鼠標(biāo)右擊事件 this.select(); //右擊對象中的文本選中效果 copyCode(this.id); //調(diào)用復(fù)制代碼函數(shù) 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(); } } //復(fù)制代碼 function copyCode(getId) { var text=document.getElementById(getId).firstChild.nodeValue; window.clipboardData.setData("Text",text); alert("內(nèi)容已經(jīng)復(fù)制到剪切板！"); } //保存代碼 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"); //創(chuàng)建一個p元素節(jié)點并賦值給para變量 alert(para.nodeName); //顯示元素節(jié)點的名字 alert(para.nodeType); //nodeType的值若為1->元素節(jié)點；2->屬性節(jié)點；3->文本節(jié)點 </script>  </textarea> <textarea>  <div   class="gariqc7"   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   class="1cwdamd"   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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: