1. <lable>
  2. <input type="text" id="txt">
  3. <a href="javascript:;" id="copy">
  4. </lable>
  1. document.getElementById('copy').onclick = function() {
  2. var text = document.getElementById("txt");
  3. text.select(); // 选中文本
  4. document.execCommand("copy"); // 执行浏览器复制命令
  5. }

JavaScript提供了select()方法来选中文本

JavaScript提供了execCommand("copy")方法执行浏览器的复制命令


以上方法可能不兼容IOS,不过下面这种方法简直酷毙了~~

引入

  1. <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
  1. <!-- Target -->
  2. <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
  3. <!-- Trigger -->
  4. <button class="btn" data-clipboard-target="#foo">
  5. <img src="assets/clippy.svg" alt="Copy to clipboard">
  6. </button>

给要复制的元素设置id,给点击的元素设置data-clipboard-target属性指向要复制的元素id,也可设置data-clipboard-action="cut"选择是复制还是剪切(注:这个属性只在input和textarea上生效)

  1. var clipboard = new ClipboardJS('.btn');
  2. clipboard.on('success', function(e) {
  3. document.getElementById('foo').blur()
  4. });

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. WPF数据可视化-瀑布图

    实现方式一: 将数据(Point[])根据索引沿X轴使用虚拟画布进行绘制,每个数据绘制大小为1px * 1px:最终绘制出的宽度等于数据的总长度.标记并存储当前绘制的图为PreviousBitmap; ...

  2. django-channels的部署(supervisor+daphne+nginx)

    项目中需要一个聊天室的功能,所以需要websocket通信,选择了使用channels模块,主要记录下channels部署的配置和一些坑. 原项目是通过nginx+uwsgi部署的,这里我没做任何改动 ...

  3. jquery 实现只能选中一个checkbox,选中当前的去除上一个

    jq 实现只能选中一个checkbox,选中当前的去除上一个. <div id="checkboxed"> <input name="check1&qu ...

  4. windows系统下压缩文件成tar.gz格式的方法

    tar.gz 是linux和unix下面比较常用的格式,几个命令就可以把文件压缩打包成tar.gz格式,然而这种格式在windows并不多见,WinRAR.WinZip等主流压缩工具可以释放解开,却不 ...

  5. linux 执行 javac 报错 javac: command not found

    bash: javac: command not found java 版本 1.8 [root@localhost home]# java -version openjdk version &quo ...

  6. Linux下的find命令2

    :续linux下的find命令 Linux/Unix下非常有用的find命令的用法 功能简述:find(查找)主要沿着文件层次(目录)结构依次向下遍历,匹配符合条件的文件,可以附带执行相应的操作选项, ...

  7. Mac中创建一个OpenGL项目

    配置: OS X10.10 + Xcode 6.0 一.基本步骤 新建一个命令窗口项目 更改目标设备版本号为 OS X 8.0 添加库文件 GLUT.framework 和 OpenGL.framew ...

  8. 外部调用Tomcat启动脚本后日志中文显示乱码问题的解决

    外部sh脚本如下 #!/bin/bash while read LINE do echo "Hello $LINE!" case $LINE in all) tail -f -n2 ...

  9. JavaScript-----9.函数

    1.函数的使用 1.1 声明函数和调用函数 //1.声明函数 //function 函数名() { // //函数体 //} function sayHi() { console.log('hi~') ...

  10. C语言中,关于相除的问题

    若定义的类型是 整数型:int a,b ;则a/b的值为整数的,不会带着小数点的..... 若定义的数据类型是 浮点型的 :double a,b; 则这种情况下,得到的结果与数学结果无异