js实现按钮复制功能

最新推荐文章于 2024-06-15 07:54:41 发布

weixin_33724570

最新推荐文章于 2024-06-15 07:54:41 发布

阅读量4.1k

点赞数 2

文章标签：前端 javascript ViewUI

原文链接：https://my.oschina.net/funcy/blog/3001139

版权

为什么80%的码农都做不了架构师？>>>

“按钮复制”功能，即点击一个按钮，将内容复制到剪切版上。

功能如下图所示：

点击“复制密码”按钮。
服务器密码即复制到剪切版上，并弹出提示信息。

实现如下：

html代码：

<input type="text" style="opacity: 0; z-index: -10;" id="passwordCopy" value="">
<div class="col-md-12">
	<span class="col-md-8">
		当前服务器密码是：<font color="red"><span id="password"></span></font>
	</span>
	<span class="col-md-4">
		<button class="btn btn-primary btn-password-copy">复制密码</button>
	<span>
</div>

js代码：

var data = "passwordTest";
//加载数据
$('#password').html(data);
$('#passwordCopy').val(data);

//复制按钮
$('.btn-password-copy').on('click', function() {
    var input = document.getElementById("passwordCopy");
    // 选中文本
    input.select();
    // 执行浏览器复制命令
    document.execCommand("copy");
    gop.tips("成功复制到剪切版！");
});

转载于:https://my.oschina.net/funcy/blog/3001139