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 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
微信小程序合法域名配置方法
May 06 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
用户注册常用javascript代码
2009/08/29 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
Python科学画图代码分享
2017/11/29 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
C#中的验证控件有几种
2014/03/08 面试题
超市国庆节促销方案
2014/02/20 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
小学教育见习报告
2014/10/31 职场文书
2014年学校工作总结
2014/11/20 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle