Question

我自学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个命令）以及我可以将textarea交换到什么？已使用<span>＆amp; <div＆GT;并且该功能在更改后无效。

Answer 1

对于相对简单的事情，这看起来像是相当迂回的代码。

如上所述，是的，js区分大小写，但这只是一个问题。您还调用了不存在的函数（无论如何都不在您的代码中）。我有待纠正，但我不知道名为createTextRange（）的标准函数。

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

这是我提出的替代代码（我删除了显示：无;）

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>

这会复制copytext并将其粘贴到textarea中，我知道这是你的代码的目的吗？ Fiddle is here

希望这有帮助

JavaScript仅适用于IE11兼容模式

1 个答案: