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 ...
随机推荐
- LeetCode--回文数(简单)
题目描述: 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 2: 输入: -121 输出: false 解 ...
- 12-《Node.js开发指南》-核心模块
全局对象 Node.js中的全局对象是global 所有全局变量(除了global本身以外)都是global对象的属性 最根本的作用为全局变量的宿主 全局变量 //满足以下条件的是全局变量 a.在最外 ...
- 【python爬虫】Xpath
一.xml是什么 1.定义:可扩展标记性语言 2.特点:xml的是具有自描述结构的半结构化数据. 3.作用:xml主要设计宗旨是用来传输数据的.他还可以作为配置文件. 二.xml和html的区别 1. ...
- 新版Notepad++加十六进制查看的插件HexEditor
Notepad++新版虽然去掉了在线插件商店功能,但是依然可以使用自定义插件 Notepad++下载地址 腾讯(请务必点普通下载):https://pc.qq.com/detail/0/detail_ ...
- 你必须知道的Docker数据卷(Volume)
本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章. 一.将Docker数据挂载到容器 在Docker中,要想实现数据的持久化(所谓 ...
- ETCD:在容器中运行etcd集群
原文地址:Docker container 以下指南显示了如何使用静态引导过程在rkt和Docker上运行etcd. rkt 运行单节点的etcd 以下rkt run命令将在端口2379上公开etcd ...
- Vue 从入门到进阶之路(十一)
之前的文章我们说了一下 vue 中组件的原生事件绑定,本章我们来所以下 vue 中的插槽使用. <!DOCTYPE html> <html lang="en"&g ...
- RabbitMQ与Spring的框架整合之Spring Boot实战
1.RabbitMQ与Spring的框架整合之Spring Boot实战. 首先创建maven项目的RabbitMQ的消息生产者rabbitmq-springboot-provider项目,配置pom ...
- 02-java性能调优-JVM内存模型详解
JVM整体结构与内存模型之间的关系 JVM整体结构图如下: 先贴一个代码: package com.jvm.jvmCourse2; public class Math { public static ...
- 易优CMS:if的基础用法
[基础用法] 名称:if 功能:条件判断,比switch判断标签更灵活些,视个人习惯而用. 语法: {eyou:if condition='($eyou.field.has_children > ...