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 回车事件实现代码
Aug 23 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
Python实现网站注册验证码生成类
2017/06/08 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python字符串查找函数的用法详解
2019/07/08 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Python如何省略括号方法详解
2020/03/21 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
项目建议书格式
2014/03/12 职场文书
公司股东合作协议书
2014/09/14 职场文书
授权委托书
2014/09/17 职场文书
安全生产培训心得体会
2016/01/18 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL