Fatal编程技术网
  • javascript/
  • Javascript 如何使用jquery将文本字段值复制到剪贴板？

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

javascript jquery html

Javascript 如何使用jquery将文本字段值复制到剪贴板？,javascript,jquery,html,zeroclipboard,zclip,Javascript,Jquery,Html,Zeroclipboard,Zclip,我想使用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

我想使用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>
我在其他线程中看到了一些示例：

(一)

(二)

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

我将告诉您如何使用它：

$('button').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input[type="text"]').val();}
});
这就是你必须使用它的方式

另外，请确保使用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>


$（文档）.ready（函数（）{
$（“#复制按钮“）.attr（“数据剪贴板文本”，“我是”）；
var clip=新的零剪贴板（document.getElementById（“复制按钮”）{
电影路径：“/scripts/ZeroClipboard.swf”
});
clip.on（“加载”，功能（客户端）{
client.on（“完成”，函数（client，args）{
//`this`是单击的元素
//this.style.display=“无”；
//警报（“将文本复制到剪贴板：+args.text”）；
});
});
});
复制链接按钮
ZeroClipboard在后台使用Flash swf，此时，您可能希望避免这种情况。使用名为clipboard.js的库可以实现这一点，无需闪存

$（函数（）{
$（“#复制按钮”）。单击（函数（）{
$（'.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>$(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">