定義済みテキストのJavaScriptボタン

Question

私は、テキストのコピーを自動化するプロジェクトに取り組んでいます。しかし、私がしたいのは、ユーザーがクリックして指定したテキストをクリップボードに挿入するボタンがあるだけです。

私は今テキストエリアからテキストをコピーすることでこれを行うことができますが、テキストエリアの必要性を取り除き、ボタンを持っています。

ボタンを押すと、ボタンの値に基づいてテキストがクリップボードに挿入されます。

たとえば、以下のスニペットには、ボタンがコピーするテキスト領域があります。私は、ボタン、テキストなしの面積を有し、かつ一度あなたがボタンのテキストだけを使用したい場合は、クリップボード

<textarea id="alu1" rows="1" border="none" style="width:70%; height: 10px"> 
 
ssh -l admin:admin x.x.x.x 
 
</textarea> 
 
<button id="alu1copy" style="width: 50px; height: 20px">ssh -l admin:admin x.x.x.x</button> 
 
<script> 
 
var input1 = document.getElementById("alu1"); 
 
var button = document.getElementById("alu1copy"); 
 
button.addEventListener("click", function (event) { 
 
     event.preventDefault(); 
 
     input1.select(); 
 
     document.execCommand("copy"); 
 
    }); 
 
</script>

Answer 1

これは動作します。それはthis exampleから採用されている。ここで

var copyBtn = document.getElementById('alu1copy'); 
 

 
copyBtn.addEventListener('click', function(event) { 
 
    var range = document.createRange(); 
 
    range.selectNode(copyBtn); 
 
    window.getSelection().addRange(range); 
 
    try { 
 
    var successful = document.execCommand('copy'); 
 
    var msg = successful ? 'successful' : 'unsuccessful'; 
 
    console.log('Copy command was ' + msg); 
 
    } catch(err) { 
 
    console.log('Unable to copy', err); 
 
    } 
 
    window.getSelection().removeAllRanges(); 
 
});

<button id="alu1copy">I will be copied</button>

はCodePen Demoです。

---

更新：HTMLインラインJavaScriptの

<button id="alu1copy">Copy me now</button> 
 

 
<script> 
 
    var copyBtn = document.getElementById('alu1copy'); 
 

 
    copyBtn.addEventListener('click', function(event) { 
 
    var range = document.createRange(); 
 
    range.selectNode(copyBtn); 
 
    window.getSelection().addRange(range); 
 
    try { 
 
     var successful = document.execCommand('copy'); 
 
     var msg = successful ? 'successful' : 'unsuccessful'; 
 
     console.log('Copy command was ' + msg); 
 
    } catch (err) { 
 
     console.log('Unable to copy', err); 
 
    } 
 
    window.getSelection().removeAllRanges(); 
 
    }); 
 
</script>

と

---

あなたはより包括的なもの、this answer作品からのコードだけでなく必要な場合。

Answer 2

にボタンの名前をコピーします押したいです

var elem = document.getElementById("alu1copy"); 
var txt = elem.textContent || elem.innerText; 

Answer 3

<script> 
var input1 = document.getElementById("alu1"); 
var button = document.getElementById("alu1copy"); 
button.addEventListener("click", function (event) { 
     event.preventDefault(); 
     input1.innerHTML = e.target.textContent; 
    }); 
</script> 

Answer 4

<textarea id="alu1" rows="1" border="none" style="width:70%; height: 10px"> 
 
ssh -l admin:admin x.x.x.x 
 
</textarea> 
 
<button id="alu1copy" style="width: 50px; height: 20px">ssh -l admin:admin x.x.x.x</button> 
 
<script> 
 
var input1 = document.getElementById("alu1"); 
 
var button = document.getElementById("alu1copy"); 
 
button.addEventListener("click", function (event) { 
 
     event.preventDefault(); 
 
      button.innerText = input1.value; 
 
     document.execCommand("copy"); 
 
    }); 
 
</script>