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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript实现的textarea运行框效果代码不用指定id批量指定

Javascript: 根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码; 浮动广告js类实现; 使用透明叠加法美化文件上传界面的代码; 用Div仿showModalDialog模式菜单的效果的代码; JsEasy简介 JsEasy是什么?与下载; 网页屏蔽(左右键,代码等)的非JS方法; 在IE模态窗口中自由查看HTML源码的方法; 点下网页的任意地方,都可到达指定页面的js代码; 实例学习Javascript之构建方法、属性; 腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二; 腾讯QQ网页在线客服，随网页滚动条上下移动的效果一; 可以媲美Flash的JS导航菜单; js实现的XP风格的右键菜单; 用JavaScript实现仿Windows关机效果; 学习YUI.Ext基础第一天; 学习YUI.Ext 第四天--对话框Dialog的使用; Gird组件 Part-3:范例RSSFeed Viewer; 可缩放Reloaded-一个针对可缩放元素的复用组件; 简单三步，搞掂内存泄漏; pjblog修改技巧汇总

No. « ‹ 202 203 204 205 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 194 ::

收藏到网摘: n/a

用javascript获取当页面上鼠标光标位置和触发事件的对象的代码测试你的JS的掌握程度的代码

今天在写一个网页的时候用到了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 全选提示:你可先修改部分代码,再按运行]

用javascript获取当页面上鼠标光标位置和触发事件的对象的代码测试你的JS的掌握程度的代码

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

评论 (0) All

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