我自学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>
但是我知道不足以调整它以便在网页上使用几个不同的文本(需要14个命令)以及我可以将textarea交换到什么?已使用<span>
&amp; <div
&GT;并且该功能在更改后无效。
答案 0 :(得分: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
希望这有帮助