首頁 >web前端 >js教程 >javascript实现的textarea运行框效果代码不用指定id批量指定_javascript技巧

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

WBOY原創: 2016-05-16 18:39:501112瀏覽

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

<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>

<textarea> 
 
<script> 
var para = document.createElement("p"); //创建一个p元素节点并赋值给para变量 
alert(para.nodeName); //显示元素节点的名字 
alert(para.nodeType); //nodeType的值若为1->元素节点；2->属性节点；3->文本节点 
</script>

<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> 
 
<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>

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：测试你的JS的掌握程度的代码_javascript技巧下一篇：jQuery Selectors(选择器)的使用(七、子元素篇)_jquery

看更多

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

相關文章

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