学习使用js复制指定div、a标签内的文本内容,支持换行

学习使用js复制指定div、a标签内的文本内容,支持换行

    • html代码
    • js和jquery函数
    • 效果图

html代码

<a class="chat_a" onclick="copy_text(this)" href="javascript:void(0);">赠汪伦,其一:<br>李白乘舟将欲行,忽闻岸上踏歌声。<br>桃花潭水深千尺,不及汪伦送我情。<br>赠汪伦,其二:<br>李白乘舟将欲行,又闻岸上踏歌声。<br>声断红楼梦,夜阑起白妍。<br>赠汪伦,其三:<br>李白乘舟将欲行,忽闻岸上踏歌声。<br>桃花潭水深千尺,不及汪伦送我情。<br>挥手自兹去,萧萧班马鸣。a>

js和jquery函数

//点击复制
    function copy_text(that) {

        let chat_content = $(that).text();
        console.log('copy_text----chat_content==', chat_content);

        /*
        let chat_html = $(that).html();
         console.log('copy_text----chat_html==', chat_html);
       */

        //赋值给文本框 打印一下
        $("#talkwords").val(chat_content);


        var text = $(that)[0];
        //做下兼容
        if (document.body.createTextRange) {  //如果支持
            var range = document.body.createTextRange(); //获取range
            range.moveToElementText(text); //光标移上去
            range.select();  //选择
        } else if (window.getSelection) {
            var selection = window.getSelection(); //获取selection
            var range = document.createRange(); //创建range
            range.selectNodeContents(text);  //选择节点内容
            selection.removeAllRanges(); //移除所有range
            selection.addRange(range);  //添加range
            /*if(selection.setBaseAndExtent){
             selection.setBaseAndExtent(text, 0, text, 1);
             }*/
        } else {
            alert("复制失败");
        }

        document.execCommand('copy');
        alert('已复制好,可贴粘!');

    }

效果图

学习使用js复制指定div、a标签内的文本内容,支持换行_第1张图片

你可能感兴趣的:(Jquery,Javascript,Html,javascript,学习,开发语言)