PC端通过js获取到鼠标选中的文本

最新推荐文章于 2024-07-08 11:16:05 发布

yunchong_zhao

最新推荐文章于 2024-07-08 11:16:05 发布

阅读量1.2k

点赞数 3

分类专栏：经验心得 javascript 文章标签： javascript

本文链接：https://blog.csdn.net/yunchong_zhao/article/details/105453523

版权

javascript 同时被 2 个专栏收录

346 篇文章 16 订阅

订阅专栏

经验心得

16 篇文章 0 订阅

订阅专栏

在pc端开发的时候,会碰见这种需求的

<html>
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js获取鼠标选中的文字</title>
 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
	1111111122222222222222333333333333334444444444444444
</div>
</body>
<script>
	$('div').mouseup(function(){
	    var txt = 
		window.getSelection?window.getSelection():
		document.selection.createRange().text;
	    alert(txt) ;
	})
</script>
</html>

上面完成鼠标按下选中文本然后浏览器弹出你所选中的文本

在这里插入图片描述
后面附上一个 vue中获取选中文本的方式

<div id="app">
	<div ref="content">
		{{msg}}
	</div>
</div>
let vm=new Vue({
	el:"#app",
	data:{
		msg:"111111111111111111111111111"
	},
	mounted() {
		this.$refs.content.addEventListener('mouseup',function(){
			var txt=window.getSelection?window.getSelection().toString():
			document.selection.createRange().text;
			console.log(txt)
		})
	}
})