我已经自学了HTML和CSS代码,但是现在我仍然很难理解JavaScript。我为一个小型支持小组工作,并创建了一个独立的网页,该网页具有指向其他几个独立网页的链接。很多时候,我们必须在系统中使用相同的命令,所以我制作了一个网页,该网页使用以下代码将文本复制到剪贴板:

<html>
    <head>
        <title>Electrical Application Support</title>
        <link rel="stylesheet" type="text/css" href="CSS/elec-styles.CSS'>
    <style>
        html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
    </style>
    </head>

    <body>
        <h1 class="w3-text-teal w3-center">Password Reset</h1>
        <button onClick="ClipBoard(copytext);">Copy</button><span ID="copytext">text 1</span><br>
        <button onClick="ClipBoard(copytext1);">Copy</button><span ID="copytext1">text 2</span><br>
        <button onClick="ClipBoard(copytext2);">Copy</button><span ID="copytext2">text 3</span><br>
        <button onClick="ClipBoard(copytext3);">Copy</button><span ID="copytext3">text 4</span><b>(make sure the account is theirs)</b><br>
        <button onClick="ClipBoard(copytext4);">Copy</button><span ID="copytext4">text 5</span><br><br>
        <b>If they have a disuser flag then use this:</b><br><br>
        <button onClick="ClipBoard(copytext5);">Copy</button><span ID="copytext5">text 6</span>
        <textarea ID="holdtext" STYLE="display:none;"></textarea>

        <script language="JavaScript">
        function ClipBoard(ct) {
        holdtext.innerText = ct.innerText;
        Copied = holdtext.createTextRange();
        Copied.execCommand("Copy");
        }
        </script>
    </body>
</html>


但是我们不得不更新网页,并且必须关闭兼容模式,以便网页可以正确显示,但是现在此JavaScript无法使用。

我确实找到了在兼容模式关闭时有效的代码:

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});


与:

<p>
<textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

<p>
<button class="js-textareacopybtn">Copy Textarea</button>
</p>


来自this post on this website

但我不了解该语言,无法对其进行调整以用于网页上的多个不同文本(需要14个命令),并且我还能将文本区域交换给什么?使用<span>和>,更改后该功能不起作用。

最佳答案

对于某些相对简单的事情,这看起来像是回旋代码。

如前所述,是的,js区分大小写,但这只是一个问题。您还正在调用不存在的函数(无论如何不在代码中)。我已经得到纠正,但我不知道一个称为createTextRange()的标准函数。

您在第一个代码块中没有定义任何变量。您应该声明变量,然后使用getElementById查找适当的元素。您可以进一步声明以获取诸如innerHTML / innerText等属性。

这是我想到的替代代码(我删除了display:none;)



document.getElementById("Copy").addEventListener("click", ClipBoard, false);

 function ClipBoard() {
    var ct = document.getElementById("ct");
    var ctxt = ct.innerText;
    var hold = document.getElementById("holdtext");
    hold.innerText = ctxt;
  };

#ct{
  font-style: italic;
}

<button id="Copy">Copy</button>
<span id="ct"><code>set def sys$system TEST 99</code></span>
<br>
<br>
<textarea id="holdtext"></textarea>





这将复制文本复制并粘贴到文本区域,据我了解,这是您的代码的目的吗? Fiddle is here

希望这可以帮助

10-07 21:47