ボタンをクリックしたときにURLをコピーしようとしています。いくつか試してみましたが、うまくいきません。 http://www.w3schools.com/code/tryit.asp?filename=FAF25LWITXR5
function Copy()
{
var Url = document.createElement("textarea");
Url.innerHTML = window.location.href;
Copied = Url.createTextRange();
Copied.execCommand("Copy");
}
<div>
<input type="button" value="Copy Url" onclick="Copy();" />
<br />
Paste: <textarea rows="1" cols="30"></textarea>
</div>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function Copy()
{
//var Url = document.createElement("textarea");
urlCopied.innerHTML = window.location.href;
//Copied = Url.createTextRange();
//Copied.execCommand("Copy");
}
</script>
<body>
<div>
<input type="button" value="Copy Url" onclick="Copy();" />
<br />
Paste: <textarea id="urlCopied" rows="1" cols="30"></textarea>
</div>
</body>
</html>
新しいtextarea
を作成する必要はありません。いくつかのtextarea
( 'url')を指定して、既存のid
を取得しようとします。
これが実際の例です
function Copy() {
var Url = document.getElementById("url");
Url.innerHTML = window.location.href;
console.log(Url.innerHTML)
Url.select();
document.execCommand("copy");
}
<div>
<input type="button" value="Copy Url" onclick="Copy();" />
<br /> Paste: <textarea id="url" rows="1" cols="30"></textarea>
</div>
ボタンがクリックされたら、#urlのコンテンツを選択し、クリップボードにコピーします。
<html>
<body>
<input type="button" value="Copy Url" id="copy" />
<br />
Paste: <textarea rows="1" cols="30" id="url"></textarea>
<script type="text/javascript">
document.querySelector("#copy").onclick = function() {
document.querySelector("#url").select();
document.execCommand('copy');
};
</script>
</body>
</html>
コードを少し修正すれば機能します。
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function Copy()
{
var Url = document.getElementById("paste-box");
Url.value = window.location.href;
Url.focus();
Url.select();
document.execCommand("Copy");
}
</script>
<body>
<div>
<input type="button" value="Copy Url" onclick="Copy();" />
<br />
Paste: <textarea id="paste-box" rows="1" cols="30"></textarea>
</div>
</body>
</html>