【JavaScript】获取到选中的文字、复制选中的文字

最新推荐文章于 2024-04-19 15:34:45 发布

汪小穆

最新推荐文章于 2024-04-19 15:34:45 发布

阅读量1.3w

点赞数 4

分类专栏： JavaScript 文章标签：复制选中的文字获取到选中的文字 document.execCommand() 移动端复制选取内容 clipboard.js

本文链接：https://blog.csdn.net/w390058785/article/details/80336807

版权

JavaScript 专栏收录该内容

33 篇文章 6 订阅

订阅专栏

前言：两个小技巧

一、输出选中的文字内容

<body>
<div id="content" style="width:300px; margin:50px;">
	确认过眼神 我遇上对的人<br />
	我策马出征 马蹄声如泪奔<br />
	青石板上的月光照进这山城<br />
	我一路的跟 你轮回声 我对你用情极深<br />
	洛阳城旁的老树根<br />
	像回忆般延伸你问<br />
	经过是谁的心跳声<br />
	我拿醇酒一坛饮恨<br />
	你那千年眼神是我<br />
	醉醉坠入赤壁的 伤痕<br />
	确认过眼神 我遇上对的人<br />
</div>
<script>

	var oContent =document.getElementById('content');
	oContent.onmouseup = function(){
		alert(selectText());
	};  
	
	function selectText(){
		if(document.Selection){       
			//ie浏览器
			return document.selection.createRange().text;     	 
		}else{    
			//标准浏览器
			return window.getSelection().toString();	 
		}	 
	}
</script>
</body>

二、复制选中的文字内容

<body>
<div id="content" style="width:300px; margin:50px;">
	确认过眼神 我遇上对的人<br />
	我策马出征 马蹄声如泪奔<br />
	青石板上的月光照进这山城<br />
	我一路的跟 你轮回声 我对你用情极深<br />
	洛阳城旁的老树根<br />
	像回忆般延伸你问<br />
	经过是谁的心跳声<br />
	我拿醇酒一坛饮恨<br />
	你那千年眼神是我<br />
	醉醉坠入赤壁的 伤痕<br />
	确认过眼神 我遇上对的人<br />
</div>
<script>

	var oContent =document.getElementById('content');
	oContent.onmouseup = function(){
		document.execCommand("Copy");	
		alert("复制成功")
	};  
	
</script>

选取文字，抬起鼠标后，就能对选中的文字进行复制到剪切板了，可以在其他地方粘贴。

①小技巧：全选input标签里面的所有文字，并全部复制

<body>
<input id="content" type="text" value="123456789" />
<script>

	var oContent =document.getElementById('content');
	oContent.onfocus = function(){
		oContent.select();
		document.execCommand("Copy");	
		alert("复制成功")
	};  
	
</script>
</body>

②兼容性

查看下API，发现对于document.execCommand("Copy");的兼容性并不是很完美，特别是移动端上。

③推荐插件clipboard.js

<body>
<div style="">
     <input type="text" id="id_text" value="123456789">
     <button type="button" id="id_copy" data-clipboard-target="#id_text" data-clipboard-action="copy">点击复制</button>
</div>
<script src="https://cdn.bootcss.com/clipboard.js/1.5.15/clipboard.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script>	
$(function(){  
     var clipboard = new Clipboard("#id_copy");
     clipboard.on("success",function (element) {//复制成功的回调
            console.log("复制成功，复制内容：" + element.text);
     });
});
</script>

对于大多数移动端浏览器该插件兼容效果都不错，测试了蛮多浏览器，只在UC浏览器上遇到出现无法复制问题。（如果还有其他朋友在其他浏览器遇到问题，麻烦告知）。