`
liss
  • 浏览: 826940 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

textarea元素高度自适应函数+运行效果

QQ浏览器HTML 
阅读更多 
<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>

 

分享到：
| 如何实现提交两表单 如何实现一个表单提交 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics