Question

我希望使用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，但我不知道如何只使用按钮实现复制文本框的值

Answer 1

我会告诉你如何使用它：

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

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

另外，请确保path

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

Answer 3

ZeroClipboard在后台使用Flash swf，此时您可能希望避免这种情况。使用名为 clipboard.js 的库，可以使用无Flash方式执行此操作。 http://zenorocha.github.io/clipboard.js/

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

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

4 个答案: