如何使用 jquery 将文本字段值复制到剪贴板？答案

【问题标题】：how to copy text field value to clipboard using jquery?如何使用 jquery 将文本字段值复制到剪贴板？
【发布时间】：2014-03-15 03:41:57
【问题描述】：

我想使用 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>

我在其他线程中看到了一些示例：

(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

他们使用 zeroclipboard.js，但我不知道如何实现只复制带有按钮的文本框的值

【问题讨论】：

你看过这个吗：stackoverflow.com/a/11603131/555017

标签： javascript jquery html zeroclipboard zclip

【解决方案1】：

我会告诉你如何使用它：

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

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

另外，请确保path

【讨论】：

【解决方案2】：

使用零剪贴板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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

虽然这可能会回答这个问题，但您能在这里描述一下您的建议吗？考虑添加有关此解决方案如何解决问题的详细信息。请参考stackoverflow.com/help/how-to-answer。

【解决方案5】：

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

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

【讨论】：