js实现复制粘贴
2024-08-24 00:17:41
项目中经常会遇到点击按钮复制订单号、订单id等内容到粘贴板中的需求。可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('copy'); 这个命令会将选中的内容复制到粘贴板中,那岂不是还需要选中?别急input和textarea元素有一个select()方法,这个方法可以帮我们自动选中。于是就有了下面的代码,复制过去试试吧!
1
2
3
4
5
6
7
8
9
10
11
|
function copy(text) { var input = document.createElement( 'input' ); input.setAttribute( 'readonly' , 'readonly' ); // 防止手机上弹出软键盘 input.setAttribute( 'value' , text); document.body.appendChild(input); // input.setSelectionRange(0, 9999); input.select(); var res = document.execCommand( 'copy' ); document.body.removeChild(input); return res; } |
思路分析:
- 创建input或textarea,因为这两个DOM具有select方法,可以选中内容(document.execCommand('copy')复制内容必要条件);
- 给input赋值为需要赋值的内容
- 将DOM添加到文档中
- 选中输入框中的值(也就是要复制的值)
- 执行复制命令
- 最后别忘了从文档中移除DOM元素
- 此函数最后返回了复制是否成功的结果(true/false,document.execCommand('copy')本身会返回true/false),你可以做相应的交互提示等。
最新文章
- 微信公众平台C# SDK:Senparc.Weixin.MP.dll
- html 补充
- asmca无法创建ASM磁盘
- 浅谈MIPS地址对齐问题
- YUI的类型判断函数
- (转)C#DataTable学习心得
- linux下修改.bash_profile立即生效的三种方法
- MYSQLI - mysqli
- [妙味Ajax]第三课:AJAX跨域解决方案:JSONP
- apicloud上传图片
- 浅议极大似然估计(MLE)背后的思想原理
- Linux服务器限制ssh登录,查看登录日志
- 练习:javascript-setInterval动画运动平移,定时器动画练习
- week06 09 NodeJS Server as a RPCclient - jayson
- (转)浅谈AIX下IPFilter防火墙
- CentOS 6.3下搭建Web服务器
- PHP 接收筛选项包含0的select下拉菜单的处理
- 静态分析第三发 so文件分析(小黄人快跑)
- 用gcc编译成可执行程序 (转)
- javascript+php实现根据用户时区显示当地时间的方法