Javascript button with predefined text

Question

I am working on a project to automate copying text. However, what I would like to do is just have a button that the user can click that will put a specified text to the clipboard.

I am able to do this now by copying text from a text area, however, I am trying to remove the need for a text area and just have a button.

Once pressed it will put text into the clipboard based on the buttons value.

For instance, the below posted snippet has a text area that the button will copy. I want to just have the button, no text area, and once pressed it will copy the name of the button to the clipboard

<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>

Do you want the button to copy the text from the text area to a clipboard, or to copy the text that is on the button? For the latter, you use `button.textContent`. Sorry if I misunderstand. — SGhaleb, Aug 09 '17 at 12:23

score 0 · Answer 1 · answered Aug 09 '17 at 12:22

0

If you want the text of a button, just use

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

answered Aug 09 '17 at 12:22

jetstream96

144
4
11

score 0 · Answer 2 · answered Aug 09 '17 at 12:24

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

score 0 · Answer 3 · answered Aug 09 '17 at 12:25

<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>

Dan Kreiger · Accepted Answer · 2017-08-09T19:01:10.903

0

This will work. It is adopted from 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>

Here is a CodePen Demo.

Update: HTML with inline 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>

If you need something more comprehensive, the code from this answer works as well.

edited Aug 09 '17 at 19:01

answered Aug 09 '17 at 12:33

Dan Kreiger

5,358
2
23
27

This is exactly what I needed, however, I cannot get it to work outside of this snippet – ModeratelyRetro Aug 09 '17 at 15:34
It works in the CodePen too. Would you prefer inline JavaScript like in your original example? I'll post an update with inline JS inside of the HTML. – Dan Kreiger Aug 09 '17 at 15:44
Works like a charm Dan, thank you much. Is there a condensed version of this that doesnt need the console message? – ModeratelyRetro Aug 09 '17 at 17:42
@JeremyWerner you can remove `var msg = successful ? 'successful' : 'unsuccessful';` and `console.log('Copy command was ' + msg);` if you want and it will still work. I would recommend logging to the console for the catch statement. If for some reason there is an error, you'll want to know why. The `console.log` will tell you. Also, if this answer is helpful, could you [mark it](https://stackoverflow.com/help/someone-answers) as accepted? – Dan Kreiger Aug 09 '17 at 19:05

Javascript button with predefined text

4 Answers4