html+js实现点击按钮复制文本内容到剪切板上

   日期:2024-12-26    作者:b1246800 移动:http://mip.riyuangf.com/mobile/quote/55343.html

首先需要定义一个input框,如果你想实现的效果是用户输入后,点击按钮,复制文本框的内容,那这种做法应该是很适合的。

html+js实现点击按钮复制文本内容到剪切板上

在js中

 

首先获取input框对象,然后通过select()选择对象,会选中用户输入的值,即input中的value。

然后通过document.execCommand("Copy");执行复制命令,此时可以复制到用户输入的值。

 

但是我们要实现的效果是点击按钮直接复制文本到粘贴板上

因此需要多做两步1.将值放在文本框中(value);2.将文本框隐藏(opacity)

注意:1)隐藏的时候如果使用display:none或者type=hidden都不可以,获取不到value。

2)在小程序中点击复制之后,复制成功后会调用起键盘,因此需要在input中加上readonly

这样就可以啦。

PC端和安卓都可以,不过ios好像不可以,复制不到东西。

 

主要代码如下

 

 

——————————更新——————————

发现一个棒棒的插件,官网:http://www.clipboardjs.cn/

使用它可以在移动端webview上完美解决这个问题

首先,引入js文件

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

然后,主要代码如下


 

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号