页面实现复制功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <button onclick="copyToCliper(‘复制的实际内容‘)">按钮</button></div>
        <script type="text/javascript">
            function copyToCliper(msg){
                var Sys = {};
                var ua = navigator.userAgent.toLowerCase();
                var s;
                (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
                (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
                (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
                (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
                (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
                if( Sys.ie ){
                    var _text = document.createElement("textarea");
                    _text.style.width = "1px";
                    _text.style.height = "1px";
                    _text.style.background = "transparent";
                    _text.style.border = "none";
                    _text.style.resize = "none";
                    _text.style.filter = "alpha(opacity=0)";
                    _text.textContent = msg;
                    document.body.appendChild(_text);
                    _text.select(); //选择对象
                    document.execCommand("Copy"); //执行浏览器复制命令
                    alert("已复制。");
                }
                else{
                    window.prompt("您的浏览器不支持直接复制\n请使用Ctrl+C来复制文本框内容,确认完成后点击关闭。",msg);
                }
            }
        </script>
    </body>
</html>

  

时间: 2024-12-28 00:02:28

页面实现复制功能的相关文章

禁用页面中的复制功能

发现有的网站不能使用复制功能,研究了一下发现这是CSS中的一个属性 -->  user-select HTML代码 <div class="select"> <p>三五七言 / 秋风词</p> <p>作者:李白</p> <p>秋风清,秋月明,</p> <p>落叶聚还散,寒鸦栖复惊.</p> <p>相思相见知何日?此时此夜难为情!</p> <p&

移动端html5页面长按实现高亮全选文本内容的兼容解决方案

最近需要给html5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统"复制"菜单,用户可以点击"复制"进行复制操作,然后粘贴到AppStore搜索对应的应用.之所以不是采用链接形式直接跳转到AppStore对应应用是为了通过用户的主动输入关键词搜索给推广的企业App增加权重.所以这一个"复制"功能对用户的体验至关重要. 尝试了一些做法,在安卓/iOS平台上的兼容性都不是很好.在微信浏览器内是很容易实现长按文本激发系统菜

Zero Clipboard js+swf实现的复制功能使用方法

开发中经常会用到复制的功能,在 IE 下实现比较简单.但要想做到跨浏览器比较困难了.本文将介绍一个跨浏览器的库类 Zero Clipboard .它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活. Zero Clipboard 的实现原理 Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.

【原】移动web页面给用户发送邮件的方法 (邮件含文本、图片、链接)

微信商户通有这么一个需求,用户打开H5页面后,引导用户到电脑下载设计资源包,由于各种内部原因,被告知无后台资源支持,自己折腾了一段时间找了下面2个办法,简单做下笔记. 使用maito功能,让用户自己给自己发送一份包含资源包的下载链接 调用QQ邮件分享功能,让用户自己给自己发送一份包含资源包的下载链接 maito使用方法 1.基础写法 当浏览者点击这个链接时,浏览器会自动调用默认的客户端电子邮件程序,并在收件人框中自动填上收件人的地址下面 <a href="mailto:[email pro

怎么在html页面和js里判断是否是IE浏览器

HTML里: HTML代码中,在编写网页代码时,各种浏览器的兼容性是个必须考虑的问题,有些时候无法找到适合所有浏览器的写法,就只能写根据浏览器种类区别的代码,这时就要用到判断代码了.在HTML代码中,区别各种浏览器的代码如下,以ie6为例 <!--[if IE 6]>仅IE6可识别<![endif]--> <!--[if lte IE 6]> IE6及其以下版本可识别<![endif]--> <!--[if lt IE 6]> IE6以下版本可识

JavaScript实现复制功能

这两天在做Web前端时,遇到需求通过js实现文本复制的功能. 先不考虑浏览器的兼容性,看看各浏览器对复制功能的支持情况: 1.IE浏览器,解决方法有三种,代码如下: [javascript] view plaincopy function copy(txtid){ var txtObj = document.getElementById(txtid); if(window.clipboardData){ // 仅IE支持此对象,firefox.chrome不支持 //1.通过clipboardD

js插件实现一键复制功能

clipboard.js 可以实现纯 JS 的从浏览器复制文本到系统剪贴板的功能. 使用方法: 1. 下载 clipboard.js,并在页面中引入该插件.clipboard.js 下载地址: https://github.com/zenorocha/clipboard.js <script src="/lib/js/clipbaord.js"></script> 2. 需要复制的目标文本 <span id="tar_text" >

翻译之:数据页面和数据行

数据页面和数据行 数据库中的空间分为逻辑8KB页面. 这些页面从零开始连续编号,可以通过指定文件ID和页码来引用它们. 页面编号始终是连续的,这样当SQL Server增长数据库文件时,新页面将从文件中的最高页码加1开始编号. 同样,当SQL Server收缩文件时,它会从文件中删除编号最大的页面. SQL SERVER中的数据存储 一般来说,SQL Server存储和处理数据库中的数据有三种不同的方式或技术. 使用经典的基于行的存储,数据存储在数据行中,这些数据行将来自所有列的数据组合在一起.

移动端禁止页面复制文字

有时候操作H5页面需要长按某个按钮的时候,会出现浏览器系统自带的复制功能很烦,怎么解决呢,只需要加入以下样式. body { -webkit-touch-callout: none; /*系统默认菜单被禁用*/ -webkit-user-select: none; /*webkit浏览器*/ -khtml-user-select: none; /*早起浏览器*/ -moz-user-select: none; /*火狐浏览器*/ -ms-user-select: none; /*IE浏览器*/