JavaScript-选中文字弹出对话框02

10011111

已于 2022-05-11 18:38:51 修改

阅读量582

点赞数

文章标签： javascript 前端 html

于 2021-07-07 16:57:40 首次发布

本文链接：https://blog.csdn.net/qq_43788669/article/details/118552105

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>选中文字弹出对话框</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.box1{
			width: 400px;
			height: 300px;
			border: 1px solid #ccc;
			position: relative;
			left: 0px;
			top: 0px;
			margin: 100px auto;
		}
		.box1 .txt{
			/*首行缩进两字符*/
			text-indent: 2em;
		}
	    .box2{
			width: 120px;
			height: 22px;
			border: 1px solid red;
			position: absolute;
			left: 0px;
			top: 0px;
			background-color: yellow;
			color: #fff;
			display: none;
		}
	</style>
	<script type="text/javascript">
		function $(id){
			return  document.getElementById(id);
		}
		window.onload=function(){
			$("text2").onmouseup=function(event){
				var evt=event||window.event;
				var txt=window.getSelection().toString();
				// window.getSelection().removeAllRanges();
				// alert(txt);
				if(txt)
				{
					$("text3").style.display="block";
					$("text3").style.left=evt.clientX-$("text1").offsetLeft+"px";
					$("text3").style.top=evt.clientY-$("text1").offsetTop+"px";
				}
			}
			document.onmousedown=function(event){
				var evt=event||window.event;
				if(evt.target.id != "text3")
				{
					$("text3").style.display="none";
				}
				window.getSelection?window.getSelection().removeAllranges()||document.selection.empty();//取消鼠标选中的文本;
			}
		}
	</script>
</head>
<body>

	<div class="box1" id="text1">
		<span class="txt" id="text2">卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂卡的很疯狂</span>
		<div class="box2" id="text3">
			<span>全选</span>
			<span>复制</span>
			<span>粘贴</span>
	    </div>
	</div>
</body>
</html>

10011111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript-选中文字弹出对话框02

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/h
复制链接

扫一扫