how to copy text field value to clipboard using jquery?

Question

I want copy text field value to clipboard using jquery.

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
  <body>
    <input type="text" value="my text value"></input>
    <input type="button" value="Copy to clipboard"></input>
  </body>
</html>

I saw some examples in other threads as:

(1) How to copy text to the client's clipboard using jQuery? - https://stackoverflow.com/

(2) copy text to clipboard with jquery or javascript - http://stackoverflow.com

They use zeroclipboard.js, but I do not know how to implement copy only the value of a text box with a button

Have you looked at this: http://stackoverflow.com/a/11603131/555017 — Jonathan, Mar 15 '14 at 03:54

score 1 · Answer 1 · answered Mar 15 '14 at 04:50

1

I'll tell you how to use it:

$('button').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input[type="text"]').val();}
});

This is how you have to use it.

Also, make sure about the path

answered Mar 15 '14 at 04:50

Amit Joki

58,320
7
77
95

score 1 · Answer 2 · answered Mar 15 '14 at 05:00

using zero clipboard js:

<script src="/scripts/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#copy-buttonDept").attr("data-clipboard-text", "I am");

        var clip = new ZeroClipboard(document.getElementById("copy-buttonDept"), {
            moviePath: "/scripts/ZeroClipboard.swf"
        });

        clip.on("load", function (client) {

            client.on("complete", function (client, args) {

                // `this` is the element that was clicked
                //this.style.display = "none";
                //alert("Copied text to clipboardr: " + args.text);
            });
        });
});
</script>
<button id="copy-buttonDept" class="classic" type="button" style="float: none; margin: 5px 0;">Copy Link Button</button>

score 0 · Answer 3 · answered Oct 05 '15 at 17:53

0

ZeroClipboard utilizes a Flash swf in the background, and at this point in time, you may want to avoid that. There is a Flash-free way to do this with a library called clipboard.js. http://zenorocha.github.io/clipboard.js/

answered Oct 05 '15 at 17:53

itsmikem

2,118
2
26
31

score 0 · Answer 4 · answered Jul 15 '16 at 11:43

<script>$(function() {
 $('#copybutton').click(function() {
 $('.copy-to-clipboard input').text();
 $(".copy-to-clipboard input").focus();
 $(".copy-to-clipboard input").select();
 document.execCommand('copy');
 $(".copied").text("Text Copied").show().fadeOut(1200);
 });
});
</script>
<style>
.copy-to-clipboard > input {
    border: medium none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='copied'></div>
<div class="copy-to-clipboard">`enter code here`
<p class="para">This is just for testing</p>
 <input readonly type="text" value="Click Me To Copy">
</div> <input type="button" name="submit" value="Copy" id="copybutton">

While this may answer the question, could you describe what it is your suggesting here? Consider adding details on how this solution solves the issue. Kindly refer to http://stackoverflow.com/help/how-to-answer . — J. Chomel, Jul 15 '16 at 11:50

score 0 · Answer 5 · answered Sep 14 '21 at 17:53

Without plugins/addons, this function with fallback/support for older browsers:

function copyToClipboard(text) {
  if (!navigator.clipboard) {
    // fallback to deprecated function
    const $copyEl = $('<input style="position:fixed;top:0;left:0;" type="text" />');
    $copyEl.val(text).appendTo('body')
      .trigger('focus').trigger('select');
    try {
      document.execCommand('copy');
    } catch (err) {
      console.log('Unable to copy', err);
    }
    $copyEl.remove();
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log(`Copied: ${text}`);
  }, function(err) {
    console.log('Unable to copy', err);
  });
}

$('.copy').on('click', function(e) {
  e.preventDefault();
  const $prevEl = $(this).prev();
  let text = $prevEl.val();
  if (!text) {
    text = $prevEl.text();
  }
  copyToClipboard(text);
})

button{display: block;margin:1rem;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="some input value" />
<button class="copy">Copy from input</button>
<p>some paragraph text</p>
<button class="copy">Copy from paragraph</button>
<div>some div text</div>
<button class="copy">Copy from div</button>
<textarea>some textarea text</textarea>
<button class="copy">Copy from textarea</button>

This was based on a general JS answer: https://stackoverflow.com/a/30810322/6225838

how to copy text field value to clipboard using jquery?

5 Answers5