jquery点击按钮复制内容
做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复制文本框(textarea)里的内容,把要复制的内容写在textarea里,用定位负值把文本框隐藏掉,然后就实现复制的功能了,贴一下简单的代码,共有需要的同学参考,欢迎大神指正。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>点击按钮复制dom里的内容</title>
</head>
<body> <div>
<div>我是要复制的内容1</div>
<textarea cols="20" rows="10" id="copy1" style="position: fixed;top: -2000px;">我是要复制的内容1</textarea>
<input type="button" onclick="copyContent('copy1')" value="复制1" /><br /><br />
<div>我是要复制的内容2</div>
<textarea cols="20" rows="10" id="copy2" style="position: fixed;top: -2000px;">我是要复制的内容2</textarea>
<input type="button" onclick="copyContent('copy2')" value="复制2" /><br /><br />
<div>我是要复制的内容3</div>
<textarea cols="20" rows="10" id="copy3" style="position: fixed;top: -2000px;">我是要复制的内容3</textarea>
<input type="button" onclick="copyContent('copy3')" value="复制3" /><br /><br />
</div>
<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function copyContent(id){
var copyCon = document.getElementById(id);
copyCon.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好,可贴粘。");
}
</script>
</body>
</html>
jquery点击按钮复制内容的更多相关文章
- js 实现页面点击按钮复制内容
		
前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...
 - js点击按钮复制内容到粘贴板
		
复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...
 - vue中点击按钮复制内容
		
<el-button type="primary" round size="mini" @click="copyUrl">复制u ...
 - JS实现PC、Android、IOS端的点击按钮复制内容功能
		
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
 - iOS中点击按钮复制指定内容
		
话不多说,直接上图和代码:
 - 原生 js 实现点击按钮复制文本
		
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
 - jquery点击按钮弹出图片
		
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
 - jquery( 点击按钮出来文本框并限制文本框的个数)
		
// 首先呢 编辑这个文章 主要是用于和大家的交流 以便学习和交流!! <div class="form-group" id="spots"> ...
 - jQuery 点击按钮刷新页面
		
//页面加载时绑定按钮点击事件 $(function () { $("#按钮id").click(function () { refresh(); }); }); //点击按钮调用 ...
 
随机推荐
- caffe-windows中classification.cpp的源码阅读
			
caffe-windows中classification.cpp的源码阅读 命令格式: usage: classification string(模型描述文件net.prototxt) string( ...
 - js如何设置一个倒计时
			
//申明一个定时器 let endInterval; //结束时间(毫秒数,这里是距离 1970 年 1 月 1 日至今的毫秒数) let endSeconds; //结束时间差 const ENDT ...
 - ArcGIS图框工具5.2发布,支持ArcGIS10.0,10.110.2,支持国家2000坐标系
			
ArcGIS图框工具5.2发布,支持ArcGIS10.0,10.110.2,支持国家2000坐标系 下载地址http://files.cnblogs.com/gisoracle/atktoolnew. ...
 - JPA 使用 Specification 复杂查询和 Criteria 查询
			
转自:https://blog.wuwii.com/jpa-specification.html 前言 JPA 给我们提供了基础的 CURD 的功能,并且用起来也是特别的方便,基本都是一行代码完成各种 ...
 - keras 自定义 custom 函数
			
转自: https://kexue.fm/archives/4493/,感谢分享! Keras是一个搭积木式的深度学习框架,用它可以很方便且直观地搭建一些常见的深度学习模型.在tensorflow出来 ...
 - 多线程(八)~ThreadLocal、InheritableThreadLocal的使用
			
通过前面的学习,我们了解了在多线程+成员变量等情况下会出现线程安全的问题.那么解决线程安全问题除了使用synchronize关键字之外,还有另一种常用的解决思路,那就是使用ThreadLocal类,下 ...
 - Picklist的配置
			
Picklist包括静态的Picklist和动态的Picklist.静态Picklist的配置 1.首先在All Projects中,选中Picklist,复制一个Pistlist进行修改.Name( ...
 - 12C RAC 常用检查命令,持续总结中
			
grid: olsnodes -s列出集群中节点crsctl check cluster -all检查几圈状态crsctl check clustercrsctl check crs 检查当前节点sr ...
 - OC 类 的声明
			
Student.h // @interface代表声明一个类 // : 代表继承 @interface Student : NSObject { // 成员变量要定义在下面的大括号中{} int ag ...
 - Python-time和datetime模块
			
一.time模块 1.表示时间的三种方式 >>> import time >>> time.time() #当前时间戳 1509525556.8485825 > ...