<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. Spring Cloud @RefreshScope刷新问题

    问题 使用@RefreshScope会刷新在sprign ioc中所有bean中使用@Value的值,但是在配置类中使用方法去配置的其他类参数并不会改变例如 解决方案 //使用此方法监听事件 @Eve ...

  2. Docker 中卷组管理

    一.概念 数据卷是一个可供一个或多个容器使用的特殊目录实现让容器的一个目录和宿主机中的一个文件或者目录进行绑定.数据卷 是被设计用来持久化数据的,对于数据卷你可以理解为NFS中的哪个分享出来的挂载点, ...

  3. C#后台架构师成长之路-基础体系篇章大纲

    如下基础知识点,如果不熟透,以后容易弄笑话..... 1. 常用数据类型:整型:int .浮点型:double.布尔型:bool.... 2. 变量命名规范.赋值基础语法.数据类型的转换.运算符和选择 ...

  4. [Go] 利用函数类型实现封装中的回调

    当进行业务逻辑开发的时候,经常要进行封装,封装成独立的类文件,在类文件的属性中预留出函数类型的API 在调用该类文件中某些方法的时候,也根据业务需要调用类属性中的函数, 在主业务中可以传递特定的函数注 ...

  5. Centos8尝鲜

    Centos 8阿里云下载地址https://mirrors.aliyun.com/centos/8.0.1905/isos/x86_64/ Centos8的一些变化 网络服务: 在/etc/sysc ...

  6. 手机投屏工具与HOSTS切换工具

    ApowerMirror windows -->switchhosts

  7. Bandizip解压压缩软件

    上次重装系统以后,特别注意安装软件,在这里提一些比较好的 解压软件:Bandizip 这个是一个免费轻量级的软件,压缩解压速度快,没什么广告,推荐大家在官方下载 Bandizip下载网址 点击下载安装 ...

  8. C语言程序设计100例之(19):欢乐的跳

    例19   欢乐的跳 题目描述 一个n个元素的整数数组,如果数组两个连续元素之间差的绝对值包括了[1,n-1]之间的所有整数,则称之符合“欢乐的跳”,如数组1 4 2 3符合“欢乐的跳”,因为差的绝对 ...

  9. 几种常见的css布局_l流体布局、圣杯布局、双飞翼布局

    1.流体布局: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <ti ...

  10. 通过idea将maven工程转为web项目

    前言 吐槽一下网上的各种转换教程..说的真的是吵来吵去,有用的东西极少.特此自己写一篇好使的. 转换过程 建好的maven工程 建好的maven工程长这个鬼样子~~,没有使用骨架.就是普通的建立方式. ...