欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

浮层 poshytip.js样例 和 jquery复制span的内容到剪切板

程序员文章站 2022-05-15 23:53:32
...

1. 引入js和样式

<link rel="stylesheet" type="text/css" href="css/demo/overview.css">
  <script type="text/javascript" src="js/libs/poshytip.js"></script>

2.js代码

floatDiv=function(){
        $('.trigger').poshytip({
            followCursor: true,
            alignX: 'center',
            alignY: 'top',
            showTimeout: 200,
            className: 'float-tips',
            showOn: 'hover',
            alignTo: 'target',
            content: function() {

                let name = $(this).data('name');
                let number = $(this).data('number');
                return '<div class="float-tips__cont">\n' +
                    '                        <div class="float-tips__cont-info">\n' +
                    '                            <p>名称:<span class="float-tips__data" id="copydata1">'+name+'</span></p>\n' +
                    '                            <p>编号:<span class="float-tips__data" id="copydata2">'+number+'</span></p>\n' +
                    '                        </div>\n' +
                    '                        <div class="float-tips__cont-op">\n' +
                    '                            <a class="float-tips__copy icon icon-copy" id="copytip1" title="复制" οnclick="copy(1);"  data-clipboard-text="'+name+'" href="javascript:;"></a>\n' +
                    '                            <a class="float-tips__copy icon icon-copy" id="copytip2" title="复制" οnclick="copy(2);" data-clipboard-text="'+number+'" href="javascript:;"></a>\n' +
                    '                        </div>\n' +
                    '                    </div>';
            },
            offsetY: 5
        });
    }

copy=function (copydata) {
        if(copydata==1){
            var cont = $("#copydata1").text();
        }else{
            var cont = $("#copydata2").text();
        }
        var flag = copyText(cont);
        alert(flag ? "复制成功!" : "复制失败!");
    };

    //赋值到剪切板
    copyText = function (cont)  {
        var textarea = document.createElement("input");//创建input对象
        var currentFocus = document.activeElement;//当前获得焦点的元素
        document.body.appendChild(textarea);//添加元素
        textarea.value = cont;
        textarea.focus();
        if(textarea.setSelectionRange)
            textarea.setSelectionRange(0, textarea.value.length);//获取光标起始位置到结束位置
        else
            textarea.select();
        try {
            var flag = document.execCommand("copy");//执行复制
        } catch(eo) {
            var flag = false;
        }
        document.body.removeChild(textarea);//删除元素
        currentFocus.focus();
        return flag;
    }

3.html 代码

鼠标焦点移到span上显示浮层

<span class="trigger" data-name="张三" data-number="001">张三(001</span>