编程 Javascript

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