Question

我试图在我的html页面上获得一个复制按钮，但它无法正常工作 - 在Chrome控制台中它没有说明任何内容，它只是不会复制文本。

这是我的HTML：

<!doctype html>
<div class="ipDiv tk-saffran">
  <div class="ipText">
    <h2 id="ip">play.MineGlade.net</h2>
  </div>
  <div class="copyButton">
    <button onclick="copyIp()">Copy IP</button>
    <script>
      function copyIp() {
        var copyText = document.getElementById("ip");
        copyText.select;
        document.execCommand("Copy");
      }
    </script>
  </div>
</div>

我该如何解决这个问题？

Answer 1

简单易行进行复制，请查看此更新代码

＆＃13;

function copyIp()
{
    window.getSelection().selectAllChildren(document.getElementById("ip"));
    document.execCommand("Copy");
}

＆＃13;

<div class="ipDiv tk-saffran">
    <div class="ipText">
        <h2 id="ip">play.MineGlade.net</h2>
    </div>
    <div class="copyButton">
        <button onclick="copyIp()">Copy IP</button>

    </div>
</div>

＆＃13;

Answer 2

您正在尝试选择不适用于select函数的h2内容，也就是说您没有正确调用它应该是.select（）。要选择元素内容，请检查this thread：How to select all text in contenteditable div?

请参阅我为您提供的fiddle示例

    <div class="ipDiv tk-saffran">
        <div class="ipText">
            <h2 id="ip">play.MineGlade.net</h2>
        </div>
        <div class="copyButton">
            <button onclick="copyIp()">Copy IP</button>
            <script>
                jQuery.fn.selectText = function(){
                   var doc = document;
                   var element = this[0];
                   console.log(this, element);
                   if (doc.body.createTextRange) {
                       var range = document.body.createTextRange();
                       range.moveToElementText(element);
                       range.select();
                   } else if (window.getSelection) {
                       var selection = window.getSelection();        
                       var range = document.createRange();
                       range.selectNodeContents(element);
                       selection.removeAllRanges();
                       selection.addRange(range);
                   }
                };
                function copyIp() {
                   $("#ip").selectText();
                   document.execCommand("Copy");
                }
            </script>
        </div>
    </div>

确保使用此方法包含jquery。

js复制功能在html中不起作用

2 个答案: