javascript實現的textarea運行框效果代碼不用指定id批量指定

2019-11-21 00:55:14

字體：大中小

來源：轉載

供稿：網友

剛學了點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   class="iwvjtn8m0"   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="iwvjtn8m0"   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需刷新才能執行]

上一篇：測試你的JS的掌握程度的代碼

下一篇：用javascript獲取當頁面上鼠標光標位置和觸發事件的對象的代碼