选中文字弹出对话框

最新推荐文章于 2024-08-08 20:55:06 发布

python基础教程

最新推荐文章于 2024-08-08 20:55:06 发布

阅读量1.4k

点赞数

分类专栏： 01前端基础教程html_css_js

本文链接：https://blog.csdn.net/stopcpp/article/details/52859244

版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

选择文字：选中的时候不弹出来，弹起鼠标的时候出现。用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>