2

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

4

5 回答 5

1

我会告诉你如何使用它：

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

这就是你必须使用它的方式。

另外，请确保path

于 2014-03-15T04:50:15.880 回答
1

使用零剪贴板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>
于 2014-03-15T05:00:54.810 回答
0

ZeroClipboard 在后台使用 Flash swf，此时您可能希望避免这种情况。使用名为clipboard.js的库有一种无需 Flash 的方法。http://zenorocha.github.io/clipboard.js/

于 2015-10-05T17:53:00.013 回答
0 
<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">
于 2016-07-15T11:43:22.380 回答
0

如果没有插件/插件，此功能具有对旧浏览器的回退/支持：

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>

这是基于一般的 JS 答案：https ://stackoverflow.com/a/30810322/6225838

于 2021-09-14T17:53:22.647 回答