JS简单实现元素复制示例附图


Posted in Javascript onNovember 19, 2013

源代码:

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

实现效果:
JS简单实现元素复制示例附图
Javascript 相关文章推荐
jquery 全局AJAX事件使用代码
Nov 05 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
Three.js学习之几何形状
Aug 01 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
js获取当月最后一天实例代码
Nov 19 #Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 #Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 #Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 #Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 #Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 #Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 #Javascript
You might like
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
js form action动态修改方法
2008/11/04 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
详解ES7 Decorator 入门解析
2019/02/18 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现去除代码前行号的方法
2015/03/10 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
从0开始的Python学习016异常
2019/04/08 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
PHP开发工程师面试问题集锦
2012/11/01 面试题
护理专业毕业生推荐信
2013/10/31 职场文书
导游的职业规划书范文
2013/12/27 职场文书
个人简历自我评价范文
2014/02/04 职场文书
八一建军节演讲稿
2014/09/10 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
2014年统计工作总结
2014/11/21 职场文书
2014年教务处工作总结
2014/12/03 职场文书
音乐课外活动总结
2015/05/09 职场文书