zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    CI登录验证
    兼容所有浏览器的JS动态显示当前日期时间
    Active Record 数据库模式-增删改查操作
    数据库链接的增操作举例
    CI框架获取post和get参数 CodeIgniter
    PHP日期操作类代码-农历-阳历转换、闰年、计算天数等
    根据两点间的经纬度计算距离
    Session 类
    mysql 查询优化规则
    php获取文件夹下面的文件列表和文件夹列表
  • 原文地址:https://www.cnblogs.com/qing619/p/9041258.html
Copyright © 2011-2022 走看看