点击 - 复制到剪贴板

时间:2017-08-10 14:04:33

标签: jquery html

SettingWithCopyWarning

当我点击按钮时,结果会被复制但没有粗体,下划线,行和其他格式化内容。 如何复制它,因为它默认显示?

3 个答案:

答案 0 :(得分:3)

假设您的所有样式都是内联的,您需要获取元素的html而不是文本。类似的东西:

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).html()).select(); //Note the use of html() rather than text()
  document.execCommand("copy");
  $temp.remove();
}

根据评论进行编辑:

要将格式复制到Gmail邮件正文或Word文档之类的内容,您必须实际选择该元素作为范围。当您将html内容插入textarea时,实际上是在复制原始文本。你想做这样的事情:

function copyToClipboard(element) { //Note, element should be a node rather than a jQuery instance.
    var selection = window.getSelection(), //Get the window selection
        selectData = document.createRange(); //Create a range

        selection.removeAllRanges();  //Clear any currently selected text.
        selectData.selectNodeContents(element); //Add the desired element to the range you want to select.
        selection.addRange(selectData); //Highlight the element (this is the same as dragging your cursor over an element)
        var copyResult = document.execCommand("copy");  //Execute the copy.

        if(copyResult) //was the copy successful?
            selection.removeAllRanges(); //Clear the highlight.
        else
            alert("Your browser does not support clipboard commands, press ctrl+c");
}

答案 1 :(得分:1)

&#13;
&#13;
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).html()).select();
  document.execCommand("copy");
  $temp.remove();
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1"> 
...here is a lot of <b>text</b> (html) mixed with php...
</p>
<button onclick="copyToClipboard('#p1')">Copy to clipboard</button>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

尝试使用html()而不是text()

$temp.val($(element).html()).select();