选择文字:选中的时候不弹出来,弹起鼠标的时候出现。用onmouseup ,盒子坐标 是鼠标坐标。
获得用户选择的内容:
标准浏览器:window.getSelecttion().toString();
ie:document.selection.createRange().text;
兼容性写法:
if(window.getSelection){
txt = window.getSelection().toString();
}else{
txt = document.selection.createRange().text;
}
所有字符串都为真,”“是假;所有数字都为真,0为假。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 400px;
margin: 100px;
}
#demo{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body>
<span id="demo"></span>
<div id="test">我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字</div>
<div id="another">我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字我不要复制的文字</div>
</body>
</html>
<script>
function $(id){return document.getElementById(id)}
$("test").onmouseup = function (event) {
var event = event || window.event;
var x = event.clientX;
var y = event.clientY;
var txt=""; //存储选中文字
if(window.getSelection){
txt = window.getSelection().toString();
}else{
txt = document.selection.createRange().text;
}
if(txt){
showBox(x,y,txt);
}
}
document.onmousedown = function (event) {
var event = event || window.event;
var targetId = event.target ? event.target.id :event.srcElement.id;
if(targetId != "demo"){
$("demo").style.display = "none";
}
}
function showBox(mousex,mousey,contentText){
setTimeout(function(){
$("demo").style.left = mousex + "px";
$("demo").style.top = mousey + "px";
$("demo").style.display = "block";
$("demo").innerHTML = contentText;
},200);
}
</script>