Question

我的div中带有foreaches，我的目标是创建一个按钮以将所有输出复制到de div

代码：

if(isset($_GET['bestellijst'])) 
{
    ?><div class="bestellijst"><?
    foreach ($lijst['palen'] as $key => $value) 
    {
        ?><? echo $value ?>x paal <? echo "'" .$key. " cm'" ?><br><?
    }?><br><?
    foreach ($lijst['panelen'] as $key => $value) 
    {
        ?><? echo $value ?>x panelen <? echo "'" .$key. " cm'" ?><br><?
    }
    echo "<br>beugels: " . $allebeugels . "<br>";
    ?><button onclick="KopieerFuntie()">kopieer bestellijst</button>
    </div><?
}
    }
    else{echo "<h4>Voeg een zijde toe</h4>";}
    }
    ?><script>
        function KopieerFunctie()
        {
            var copyText = document.getElementById("????");
            copyText.select();
            document.execCommand("copy");
            alert("Copied the text: " + copyText.value);
        }
    </script><?

我不知道要放入????中的内容很抱歉，如果代码是混乱的，我只是一个初学者。感谢您的帮助。

Answer 1

您在div元素上调用select使其无法正常工作，这比从输入元素中复制内容要复杂一些。

首先，您需要正确获取div元素，您可以使用 document.getElementsByClassName('bestellijst')[0]假设您的div是具有此类名称的第一个元素。

然后，您可以像这样更新功能：从J. Garcia借来的answer

function KopieerFunctie()
{
    var range = document.getSelection().getRangeAt(0);
    range.selectNode(document.getElementsByClassName('bestellijst')[0]);
    window.getSelection().addRange(range);
    document.execCommand("copy")
}

Answer 2

这是您想要获得的东西吗？

<div class="bestellijst">
  <p>hello world! </p>
</div>
<div class="bestellijst">
  <p>how are you today?</p>
</div>

<script>
  const copyFunction = () => {
    let copy = '';
    Array.prototype.slice.call(document.querySelectorAll(".bestellijst")).map(el => 
      copy += el.innerText.replace(/\r?\n/g, '') + ' '
    );
    return copy;
  };
  
  console.log(copyFunction());
  alert("Copied the text: " + copyFunction());
</script>

Answer 3

为每个HTML元素赋予一个UniqueID是一个好习惯。我建议您将它们添加到初始div以及其他所有内容。例如，div将为：

<div class="bestellijst" id="container">

然后在您的 ???? 中使用容器

请记住，您应该使用innerHtml从div中提取文本。值用于文本框或任何其他输入元素

复制文本按钮JavaScript

3 个答案: