手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS简单实现元素复制示例附图
JS简单实现元素复制示例附图
摘要:源代码:复制代码代码如下:内容筛选functiongetPositions(){varel=document.getElementById(...

源代码:

复制代码 代码如下:

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

<>

</style>

</head>

<body>

<p>筛选名单</p>

<textarea id="shaixuan" name="check" cols="23" rows="15"></textarea>

<div>参加名单</div>

<textarea id="canjia" name="canjia" cols="23" rows="15"></textarea>

<input type="button" value="内容复制">

<>

</body>

</html>

实现效果:

1

【JS简单实现元素复制示例附图】相关文章:

JS实现定时自动关闭DIV层提示框的方法

jquery简单实现外部链接用新窗口打开的方法

javascript实现可拖动变色并关闭层窗口实例

js实现字符串转日期格式的方法

js实现简单div拖拽功能实例

JavaScript实现列表分页功能特效

js+html5实现canvas绘制镂空字体文本的方法

Javascript 字符串模板的简单实现

js实现简单锁屏功能实例

javasript实现密码的隐藏与显示

精品推荐
分类导航