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 ...
随机推荐
- Linux日志中如何查找关键字及其前后的信息
在日常工作中,我们经常需要查看日志,比如可以通过 tail 命令实时查看日志,也可以通过 cat 等命令查看日志信息. 但现在我们要讨论的是,如何从日志中通过关键字过滤出我们想要的内容,方法有多种,今 ...
- Windows CLI命令
目录 Windows CLI命令 1.背景 2.netstat 罗列端口号占用情况 3.telnet 远端IP的某个端口号 Windows CLI命令 1.背景 在Windows操作系统下开发,需要用 ...
- Custom Diagrams
Custom Diagrams https://github.com/dbeaver/dbeaver/wiki/Custom-Diagrams You can create custom ER dia ...
- python 基础学习笔记(4)--字典 和 集合
**字典:** - [ ] 列表可以存储大量的数据,但是如果数据量大的话,他的查询速度比较慢,因为列表只能顺序存储,数据与数据之间的关联性不强.所以便有了字典(dict)这种容器的数据类型,它是以{} ...
- android 启动流程 相关2 init进程 属性服务
Init属性服务 系统属性服务 属性梳理 来源和读取时机 来源:内核参数 ro.kernel.* 代表有qemu内核参数才会设置(在虚拟机中) ro.boot.* 1.内核设备树相关的设备 ...
- go 语言 搭建 图片上传 服务器
工具: LiteIDE 配置: 代码:list.html <!doctype html> <html> <head> <meta charset=" ...
- docker打包python应用
操作系统 : CentOS7.5.1804_x64 docker版本 : 18.06.3-ce 本文描述了怎么将简单的python应用打包成docker镜像的过程. 本文涉及文件目录结构如下: [ro ...
- 深蓝词库转换2.6版发布——支持Emoji、颜文字和小鹤双拼
端午期间,别人在度假,我在家码代码,把深蓝词库转换做了一下版本升级.本次更新主要是2大特性: 1.支持Emoji和颜文字 在源词库中可以选择Emoji. Emoji文件的格式为: Emoji+< ...
- Linux系统:centos7下搭建Rocketmq4.3中间件,配置监控台
本文源码:GitHub·点这里 || GitEE·点这里 一.环境搭建 环境版本 centos7 jdk1.8 已搭建好 rocketmq4.3 1.下载安装包 网址 https://www.apac ...
- PAT 1010 Radix 进制转换+二分法
Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 110 be true? The an ...