<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的更多相关文章

  1. jquery( 点击按钮出来文本框并限制文本框的个数)

    // 首先呢  编辑这个文章  主要是用于和大家的交流  以便学习和交流!! <div class="form-group" id="spots"> ...

  2. Py3+PyQt5+Eric6:学习记录之第一天:点击按钮获取文本框的值并输出。

    一.使用qt designer拖拽界面. 使用qtdesigner拖拽界面:

  3. Delphi 如何操作外部程序的控件(如按钮,文本框,单选按钮等)

    看你要做什么,比较现在网络很流行的QQ.MSN这些软件都屏蔽了,你可能还可以访问一些小软件的这些控制,思路及方案如下(API函数自己去百度查一下)1.得到你要这个窗口的句柄 使用FindWindow2 ...

  4. jquery获取文本框的内容

    使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...

  5. JS事件 文本框内容改变事件(onchange)通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。

    文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...

  6. 关于MFC文本框输入内容的获取 与 设置文本框的内容

    八月要开始做界面了<( ̄︶ ̄)/,然而目前只会用MFC╮(╯▽╰)╭ 好吧,言归正传,设置好文本框后,要获取用户输入的内容,可以用: GetDlgItemText() ; 这个函数有两个参数,第 ...

  7. jQuery清除文本框,内容并设置不可用

    JQuery清除文本框,内容并设置不可用  如果是设置只读,则将disabled换成readonly function CleanText(textid) { $("#"+text ...

  8. .Net 文本框实现内容提示(仿Google、Baidu)

    原文:.Net 文本框实现内容提示(仿Google.Baidu) 1.Demo下载: 文本框实现内容提示(仿Google.Baidu).rar 2.创建数据库.表(我用的sqlserver2008数据 ...

  9. TEXT文本编辑框4 点击按钮读取文本框内容到内表

    *&---------------------------------------------------------------------* *& Report ZTEST_CWB ...

随机推荐

  1. Linux日志中如何查找关键字及其前后的信息

    在日常工作中,我们经常需要查看日志,比如可以通过 tail 命令实时查看日志,也可以通过 cat 等命令查看日志信息. 但现在我们要讨论的是,如何从日志中通过关键字过滤出我们想要的内容,方法有多种,今 ...

  2. Windows CLI命令

    目录 Windows CLI命令 1.背景 2.netstat 罗列端口号占用情况 3.telnet 远端IP的某个端口号 Windows CLI命令 1.背景 在Windows操作系统下开发,需要用 ...

  3. Custom Diagrams

    Custom Diagrams https://github.com/dbeaver/dbeaver/wiki/Custom-Diagrams You can create custom ER dia ...

  4. python 基础学习笔记(4)--字典 和 集合

    **字典:** - [ ] 列表可以存储大量的数据,但是如果数据量大的话,他的查询速度比较慢,因为列表只能顺序存储,数据与数据之间的关联性不强.所以便有了字典(dict)这种容器的数据类型,它是以{} ...

  5. android 启动流程 相关2 init进程 属性服务

    Init属性服务 系统属性服务 属性梳理 来源和读取时机 来源:内核参数 ro.kernel.*   代表有qemu内核参数才会设置(在虚拟机中) ro.boot.*     1.内核设备树相关的设备 ...

  6. go 语言 搭建 图片上传 服务器

    工具: LiteIDE 配置: 代码:list.html <!doctype html> <html> <head> <meta charset=" ...

  7. docker打包python应用

    操作系统 : CentOS7.5.1804_x64 docker版本 : 18.06.3-ce 本文描述了怎么将简单的python应用打包成docker镜像的过程. 本文涉及文件目录结构如下: [ro ...

  8. 深蓝词库转换2.6版发布——支持Emoji、颜文字和小鹤双拼

    端午期间,别人在度假,我在家码代码,把深蓝词库转换做了一下版本升级.本次更新主要是2大特性: 1.支持Emoji和颜文字 在源词库中可以选择Emoji. Emoji文件的格式为: Emoji+< ...

  9. Linux系统:centos7下搭建Rocketmq4.3中间件,配置监控台

    本文源码:GitHub·点这里 || GitEE·点这里 一.环境搭建 环境版本 centos7 jdk1.8 已搭建好 rocketmq4.3 1.下载安装包 网址 https://www.apac ...

  10. PAT 1010 Radix 进制转换+二分法

    Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 110 be true? The an ...