做移动端的项目遇到一个需求要点击按钮复制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点击按钮复制内容的更多相关文章

  1. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

  2. js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...

  3. vue中点击按钮复制内容

    <el-button type="primary" round size="mini" @click="copyUrl">复制u ...

  4. JS实现PC、Android、IOS端的点击按钮复制内容功能

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. iOS中点击按钮复制指定内容

    话不多说,直接上图和代码:

  6. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  7. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. jquery( 点击按钮出来文本框并限制文本框的个数)

    // 首先呢  编辑这个文章  主要是用于和大家的交流  以便学习和交流!! <div class="form-group" id="spots"> ...

  9. jQuery 点击按钮刷新页面

    //页面加载时绑定按钮点击事件 $(function () { $("#按钮id").click(function () { refresh(); }); }); //点击按钮调用 ...

随机推荐

  1. caffe-windows中classification.cpp的源码阅读

    caffe-windows中classification.cpp的源码阅读 命令格式: usage: classification string(模型描述文件net.prototxt) string( ...

  2. js如何设置一个倒计时

    //申明一个定时器 let endInterval; //结束时间(毫秒数,这里是距离 1970 年 1 月 1 日至今的毫秒数) let endSeconds; //结束时间差 const ENDT ...

  3. ArcGIS图框工具5.2发布,支持ArcGIS10.0,10.110.2,支持国家2000坐标系

    ArcGIS图框工具5.2发布,支持ArcGIS10.0,10.110.2,支持国家2000坐标系 下载地址http://files.cnblogs.com/gisoracle/atktoolnew. ...

  4. JPA 使用 Specification 复杂查询和 Criteria 查询

    转自:https://blog.wuwii.com/jpa-specification.html 前言 JPA 给我们提供了基础的 CURD 的功能,并且用起来也是特别的方便,基本都是一行代码完成各种 ...

  5. keras 自定义 custom 函数

    转自: https://kexue.fm/archives/4493/,感谢分享! Keras是一个搭积木式的深度学习框架,用它可以很方便且直观地搭建一些常见的深度学习模型.在tensorflow出来 ...

  6. 多线程(八)~ThreadLocal、InheritableThreadLocal的使用

    通过前面的学习,我们了解了在多线程+成员变量等情况下会出现线程安全的问题.那么解决线程安全问题除了使用synchronize关键字之外,还有另一种常用的解决思路,那就是使用ThreadLocal类,下 ...

  7. Picklist的配置

    Picklist包括静态的Picklist和动态的Picklist.静态Picklist的配置 1.首先在All Projects中,选中Picklist,复制一个Pistlist进行修改.Name( ...

  8. 12C RAC 常用检查命令,持续总结中

    grid: olsnodes -s列出集群中节点crsctl check cluster -all检查几圈状态crsctl check clustercrsctl check crs 检查当前节点sr ...

  9. OC 类 的声明

    Student.h // @interface代表声明一个类 // : 代表继承 @interface Student : NSObject { // 成员变量要定义在下面的大括号中{} int ag ...

  10. Python-time和datetime模块

    一.time模块 1.表示时间的三种方式 >>> import time >>> time.time() #当前时间戳 1509525556.8485825 > ...