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 相关文章推荐
javascript中自定义对象的属性方法分享
Jul 12 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
vue 实现单选框设置默认选中值
Nov 07 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开发环境配置记录
2011/01/14 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
javascript第一课
2007/02/27 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
Python的gevent框架的入门教程
2015/04/29 Python
python实现清屏的方法
2015/04/30 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
2014小学数学教研组工作总结
2014/12/06 职场文书
表扬稿范文
2015/01/17 职场文书
自荐信模板大全
2015/03/27 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
Go语言空白表示符_的实例用法
2021/07/04 Golang
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技