<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. LeetCode--回文数(简单)

    题目描述: 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 2: 输入: -121 输出: false 解 ...

  2. 12-《Node.js开发指南》-核心模块

    全局对象 Node.js中的全局对象是global 所有全局变量(除了global本身以外)都是global对象的属性 最根本的作用为全局变量的宿主 全局变量 //满足以下条件的是全局变量 a.在最外 ...

  3. 【python爬虫】Xpath

    一.xml是什么 1.定义:可扩展标记性语言 2.特点:xml的是具有自描述结构的半结构化数据. 3.作用:xml主要设计宗旨是用来传输数据的.他还可以作为配置文件. 二.xml和html的区别 1. ...

  4. 新版Notepad++加十六进制查看的插件HexEditor

    Notepad++新版虽然去掉了在线插件商店功能,但是依然可以使用自定义插件 Notepad++下载地址 腾讯(请务必点普通下载):https://pc.qq.com/detail/0/detail_ ...

  5. 你必须知道的Docker数据卷(Volume)

    本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章. 一.将Docker数据挂载到容器 在Docker中,要想实现数据的持久化(所谓 ...

  6. ETCD:在容器中运行etcd集群

    原文地址:Docker container 以下指南显示了如何使用静态引导过程在rkt和Docker上运行etcd. rkt 运行单节点的etcd 以下rkt run命令将在端口2379上公开etcd ...

  7. Vue 从入门到进阶之路(十一)

    之前的文章我们说了一下 vue 中组件的原生事件绑定,本章我们来所以下 vue 中的插槽使用. <!DOCTYPE html> <html lang="en"&g ...

  8. RabbitMQ与Spring的框架整合之Spring Boot实战

    1.RabbitMQ与Spring的框架整合之Spring Boot实战. 首先创建maven项目的RabbitMQ的消息生产者rabbitmq-springboot-provider项目,配置pom ...

  9. 02-java性能调优-JVM内存模型详解

    JVM整体结构与内存模型之间的关系 JVM整体结构图如下: 先贴一个代码: package com.jvm.jvmCourse2; public class Math { public static ...

  10. 易优CMS:if的基础用法

    [基础用法] 名称:if 功能:条件判断,比switch判断标签更灵活些,视个人习惯而用. 语法: {eyou:if condition='($eyou.field.has_children > ...