这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
实现元素复制的方法有很多,在本文将为大家介绍下使用 js 是如何实现的,下面有个不错的示例,希望大家可以尝试操作下
源代码:实现效果:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <meta name="Author" content="">
- <title>
- 内容筛选
- </title>
- <script type='text/javascript'>
- function getPositions() {
- var el = document.getElementById('shaixuan');
- var startPosition = 0; //所选文本的开始位置
- var endPosition = 0; //所选文本的结束位置
- if (document.selection) {
- //IE
- var range = document.selection.createRange(); //创建范围对象
- var drange = range.duplicate(); //克隆对象
- drange.moveToElementText(el); //复制范围
- drange.setEndPoint('EndToEnd', range);
- startPosition = drange.text.length - range.text.length;
- endPosition = startPosition + range.text.length;
- } else if (window.getSelection) {
- //Firefox,Chrome,Safari etc
- startPosition = el.selectionStart;
- endPosition = el.selectionEnd;
- }
- return {
- "start": startPosition,
- "end": endPosition
- }
- }
- //@todo 获取textarea中,选中的文本
- function getshaixuan() {
- var position = getPositions();
- var start = position.start; //开始位置
- var end = position.end; //结束位置
- var text = document.getElementById('shaixuan').value;
- var selectText = text.substr(start, (end - start)); //textarea中,选中的文本
- //alert(selectText);
- var textBox1 = document.getElementById("canjia");
- textBox1.innerText = textBox1.value + selectText;
- }
- //]]>
- </script>
- <title>
- 元素的复制
- </title>
- <style type="text/CSS">
- <!-- body{ font-size:18px} p{border-style:none} .p1{ background-color:#FFFFFF;margin-top:60px;margin-bottom:3px;margin-left:200px;}
- .p2{ background-color:#FFFFFF;margin-top:2px;margin-bottom:3px;margin-left:150px;}
- .p3{ background-color:#FFFFFF;margin-top:1px;margin-bottom:3px;position:absolute;left:550px;top:60px}
- .p4{ background-color:#FFFFFF;margin-top:1px;margin-bottom:3px;position:absolute;left:500px;top:85px}
- .p5{ background-color:#FFFFFF;margin-top:1px;margin-bottom:3px;position:absolute;left:380px;top:190px}
- -->
- </style>
- </head>
- <body>
- <p class="p1">
- 筛选名单
- </p>
- <textarea id="shaixuan" name="check" cols="23" rows="15" class="p2">
- </textarea>
- <div class="p3">
- 参加名单
- </div>
- <textarea id="canjia" name="canjia" cols="23" rows="15" class="p4">
- </textarea>
- <input type="button" value="内容复制" class="p5" onclick="getshaixuan();">
- <!--</textarea> <button onclick="getshaixuan()">获取内容</button>-->
- </body>
- </html>
来源: http://www.phperz.com/article/17/0625/278330.html