JavaScript实现点击复制按钮复制文本框的内容,兼容IOS
<lable>
<input type="text" id="txt">
<a href="javascript:;" id="copy">
</lable>
document.getElementById('copy').onclick = function() {
var text = document.getElementById("txt");
text.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
}
JavaScript提供了select()方法来选中文本
JavaScript提供了execCommand("copy")方法执行浏览器的复制命令
以上方法可能不兼容IOS,不过下面这种方法简直酷毙了~~
引入
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
给要复制的元素设置id,给点击的元素设置data-clipboard-target属性指向要复制的元素id,也可设置data-clipboard-action="cut"选择是复制还是剪切(注:这个属性只在input和textarea上生效)
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
document.getElementById('foo').blur()
});
js中只需要调用ClipboardJS这个构造函数,传入要点击的元素即可
on方法传入success即为复制成功执行的代码块。
具体详情,请查看官网http://www.clipboardjs.cn/
JavaScript实现点击复制按钮复制文本框的内容,兼容IOS的更多相关文章
- jquery( 点击按钮出来文本框并限制文本框的个数)
// 首先呢 编辑这个文章 主要是用于和大家的交流 以便学习和交流!! <div class="form-group" id="spots"> ...
- Py3+PyQt5+Eric6:学习记录之第一天:点击按钮获取文本框的值并输出。
一.使用qt designer拖拽界面. 使用qtdesigner拖拽界面:
- Delphi 如何操作外部程序的控件(如按钮,文本框,单选按钮等)
看你要做什么,比较现在网络很流行的QQ.MSN这些软件都屏蔽了,你可能还可以访问一些小软件的这些控制,思路及方案如下(API函数自己去百度查一下)1.得到你要这个窗口的句柄 使用FindWindow2 ...
- jquery获取文本框的内容
使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...
- JS事件 文本框内容改变事件(onchange)通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。
文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...
- 关于MFC文本框输入内容的获取 与 设置文本框的内容
八月要开始做界面了<( ̄︶ ̄)/,然而目前只会用MFC╮(╯▽╰)╭ 好吧,言归正传,设置好文本框后,要获取用户输入的内容,可以用: GetDlgItemText() ; 这个函数有两个参数,第 ...
- jQuery清除文本框,内容并设置不可用
JQuery清除文本框,内容并设置不可用 如果是设置只读,则将disabled换成readonly function CleanText(textid) { $("#"+text ...
- .Net 文本框实现内容提示(仿Google、Baidu)
原文:.Net 文本框实现内容提示(仿Google.Baidu) 1.Demo下载: 文本框实现内容提示(仿Google.Baidu).rar 2.创建数据库.表(我用的sqlserver2008数据 ...
- TEXT文本编辑框4 点击按钮读取文本框内容到内表
*&---------------------------------------------------------------------* *& Report ZTEST_CWB ...
随机推荐
- sparql 查询语句快速入门
介绍 RDF is a directed, labeled graph data format for representing information in the Web. RDF is ofte ...
- 为什么delete后磁盘空间没有释放而truncate会释放?
背景 因项目需求,需要清理一批旧数据,腾出空间给新数据,让同事负责这件事.料想会很顺利,但很快找到我,并告知在postgresql中把一张大的数据表删除掉了,查询表的size并没有改变. 我震惊了,问 ...
- COSCon'19 | 如何设计新一代的图数据库 Nebula
11 月 2 号 - 11 月 3 号,以"大爱无疆,开源无界"为主题的 2019 中国开源年会(COSCon'19)正式启动,大会以开源治理.国际接轨.社区发展和开源项目为切入点 ...
- DotNet Core中使用RabbitMQ
上一篇随笔记录到RabbitMQ的安装,安装完成,我们就开始使用吧. RabbitMQ简介 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协 ...
- [20191127]探究等待事件的本源4.txt
[20191127]探究等待事件的本源4.txt --//昨天使用ash_wait_chains.sql脚本把各个生产库执行1遍,才发现我对一套系统性能理解错误.--//我一直以为这套系统存储有点问题 ...
- [Go] 解决golang.org模块无法下载的问题
使用GOPROXY环境变量解决proxy.golang.org无法访问问题 在/etc/profile中增加 export GOPROXY=https://goproxy.cn windows下使用 ...
- VSCode+C++环境搭建
date: 2019-10-05 VSCode+C++环境搭建 其实并不完整,毕竟我也只是一个OIer,并不会很高深的东西.(众所周知,OIer主业是软件开发) 安装VSCode 下载安装包 这个很简 ...
- 使用ClickOnce发布Windows应用程序
前言 因本人工作需要,在一名非常非常好的老师的指导下,入门了C#,再次向老师表示感谢. 本人平时经常遇到的业务就是将数据下发给各部门,并让各部门再上报,此过程中经常会遇到数据格式不正确,数据错误等诸多 ...
- 改变JAVA窗体属性的操作方法
在本篇内容里小编给大家详细分析了关于改变JAVA窗体属性的操作方法和步骤,需要的朋友们学习下. 若将JDK版本升级到最新版本,Java窗体就可以简单实现窗体的透明效果,用户可以通过拉动滑块(Slide ...
- 查看SpringBoot应用中的嵌入式tomcat的版本
第一种,在启动springboot项目的时候,日志中可以看到 第二种,直接在maven依赖文件中查看 地址在:你的maven库文件夹/org/springframework/boot/spring-b ...