我已经自学了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
希望这可以帮助