欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS实现点击按钮复制<input>标签中的值到剪贴板

程序员文章站 2022-05-12 22:22:50
...
<div id="div">  
    <p>我的推广链接:</p>  
    <input id="input" value="http://www.baidu.com" readonly/>  
    <button onclick="copyUrl()">点击复制链接</button>  
</div>
<script>	
function copyUrl() {  
    var Url=document.getElementById("input");  
    Url.select(); // 选择对象  
    document.execCommand("Copy"); // 执行浏览器复制命令  
    alert("复制成功!");  
}
</script>

1、<input>标签里的值应该设置为只读,所以加了属性readonly。一开始我加了disabled,发现不能复制,后来查了,用readonly才能复制。

2、代码的最后一行用了layer插件,插件地址:http://layer.layui.com/

2018/06/14更新:

题外话:昨天接了一个面试电话,是我做梦都想进的公司的(从我学前端没多久后,就想进的,原因是觉得他们的前端工程师一定个个都很厉害,哈哈哈)。给我激动了好几天,但是也害怕了好几天,因为我真的很多东西都不懂,特别是底层原理和原生JS的东西。结果想当然啦,虽然我尽我最大的努力准备了,但是不像高中考试临时抱佛脚也可以...因为前端的知识面真是太广了~不过通过这次电话面试,我也发现了,自己以前那么学前端真的是非常不努力,而且都是只知其然,不知其所以然!继续努力吧,争取早日实现梦想!!!然后见到我的偶像LLH。人真的超级超级nice!

言归正传:

面试电话里被问了这篇博客文章里的复制粘贴到剪贴板功能的代码的兼容问题,我可能那时候用这个功能的时候根本没意识到会有兼容问题,所以也没有在IE下测试,然后面试官告诉我,在IE下会有兼容问题不能使用。然后我今天就来测试测试啦。

为了偶像,他说要查文档才知道,我很傻地问了:“什么文档?我自己去查。”

偶像说:document.execCommand

然后我第一次发现MDN文档上原来还有浏览器兼容性说明。简直无知...

点击打开链接

JS实现点击按钮复制&amp;lt;input&amp;gt;标签中的值到剪贴板

文档写了,IE9及以上开始支持,于是我用IE9测试了,又拿IE10、11测试了,然后把浏览器调试回IE8、IE7都试了,除了跳出提示需要加载一个ActiveX的控件外,剪贴板的功能是可以用的。

然后我在想,会不会调试的IE8和真实的IE8不一样,就把自己电脑上的IE11给卸载了,重启,默认回到了IE8,结果也是一样,允许装ActiveX控件后,剪贴板复制粘贴功能还是可以用...

有人知道这个问题吗?那这在IE8及以下到底有没有兼容问题呀?求指教。

如果纯粹是因为ActiveX控件,那我在IE11下测试也是提示要装这个控件啊。可以用JS判断下浏览器是不是IE的,是的话,多加一条文字提醒用户在IE下需要允许ActiveX控件就行了吧。

JS实现点击按钮复制&amp;lt;input&amp;gt;标签中的值到剪贴板

JS实现点击按钮复制&amp;lt;input&amp;gt;标签中的值到剪贴板JS实现点击按钮复制&amp;lt;input&amp;gt;标签中的值到剪贴板