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>
  • 相关阅读:
    Google Maps API 进级:通过XML文档加载Gpolyline或者Gpolygon
    Google Maps API 进级: GPolygon对象2
    Google Maps API 进级: GoogleMaps常用事件及应用思路2
    debian下安装JDK
    sudo 提示用户不在sudoers文件错误
    debian关闭开机自动启动时候的gui
    debian解决中文乱码,安装chinese font
    debian下intel 3945abg和T420无线网卡驱动
    debian修改系统时区
    wheezy安装oracle jdk的jdk之中文乱码处理
  • 原文地址:https://www.cnblogs.com/qing619/p/9041258.html
Copyright © 2011-2022 走看看