HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题

1.执行以下解决方案条件:(这个是原理)

①执行复制方法时 所复制文字不能被任何 块级元素和行内块元素和行内元素遮盖否则无效;(解决方案:将文本通过绝对定位或其他方式移除屏幕外)

②ios中不能复制属性值,只能复制文本元素节点;(解决方案:可以把文字颜色设成背景色就能达到隐藏看不见的效果不影响显示);

直接上代码:以下是伪代码

js代码:

     function img()
            {
                if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//区分iPhone设备
                    window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
                    var Url2=document.getElementById("biaoios");//要复制文字的节点
                    var range = document.createRange();
                    // 选中需要复制的节点
                    range.selectNode(Url2);
                    // 执行选中元素
                    window.getSelection().addRange(range);
                    // 执行 copy 操作
                    var successful = document.execCommand(‘copy‘);

                    // 移除选中的元素
                    window.getSelection().removeAllRanges();
                }else{
                    var Url2=document.getElementById("biao1");//要复制文字的节点
                    Url2.select(); // 选择对象
                    document.execCommand("Copy"); // 执行浏览器复制命令
                }

            }

html布局:

<input readOnly="true" style="outline: none;border: 0px; color: rgba(0,0,0,0.0);position: absolute;left:-200px; background-color: transparent" id="biao1" value=""/>
<div id="biaoios" style=";position: absolute;left:-200px; color: rgba(0,0,0,0);background-color: transparent" ></div>

添加要复制内容的例子:

    $("#biao1").val("要复制的内容");//要复制的内容
    document.getElementById("biaoios").innerHTML=要复制的内容+"";

原文:https://blog.csdn.net/u010853130/article/details/66971498

原文地址:https://www.cnblogs.com/shuilangyizu/p/10175620.html

时间: 2024-08-29 18:04:23

HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题的相关文章

浏览器点击复制粘贴到剪切板的解决

最近在做一个东西,需要的是复制文本里的内容 稍微研究了下关于H5的复制粘贴到剪切板的api,感觉兼容不尽人意 要么就是浏览器之间,要么就是方法需要支持https才可以,寻找了很久才找到一个符合我期许的一个插件clipboard.js 使用方法也是比较简单,直接引入js就可以使用,非常的方便快捷 1 <script type='text/javascript' src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.

解决JavaScript中批量添加事件的问题

这是JavaScript中一个老生常谈的问题,也是初学者较难理解的问题.当给一系列元素添加事件时,常常会出现一些我们不希望出现的问题.例如以下代码: //给li元素批量添加click事件 window.onload = function(){ var lists = document.getElementsByTagName("li"); for(var i=0;i<lists.length;i++){ lists[i].onclick = function(){ alert(i

如何解决JavaScript中0.1+0.2不等于0.3

console.log(0.1+0.2===0.3)// true or false?? 在正常的数学逻辑思维中,0.1+0.2=0.3这个逻辑是正确的,但是在JavaScript中0.1+0.2!==0.3,这是为什么呢?这个问题也会偶尔被用来当做面试题来考查面试者对 JavaScript的数值的理解程度. 在JavaScript中的二进制的浮点数0.1和0.2并不是十分精确,在他们相加的结果并非正好等于0.3,而是一个比较接近的数字 0.30000000000000004 ,所以条件判断结果

解决IE apk变成zip:Android 手机应用程序文件下载服务器Nginx+Tomcat配置解决方法

APK文件其实是zip格式,但后缀名被修改为apk,通过UnZip解压后,可以看到Dex文件,Dex是Dalvik VM executes的全称,即Android Dalvik执行程序,并非Java ME的字节码而是Dalvik字节码.由于APK文件本身就是压缩包,如果用户的电脑上装了WinRAR(85%的装机量),用IE下载APK文件,扩展名就会被自动改为“.zip”. 如果你的下载服务器为Nginx服务器,那么,在Nginx安装目录下的conf/mime.types文件的对应位置,加上以下一

解决IE apk变成zip:Android 手机应用程序文件下载服务器 配置解决方法

APK文件其实是zip格式,但后缀名被修改为apk,通过UnZip解压后,可以看到Dex文件,Dex是Dalvik VM executes的全称,即Android Dalvik执行程序,并非Java ME的字节码而是Dalvik字节码.由于APK文件本身就是压缩包,如果用户的电脑上装了WinRAR(85%的装机量),用IE下载APK文件,扩展名就会被自动改为“.zip”. 如果你的下载服务器为Nginx服务器,那么,在Nginx安装目录下的conf/mime.types文件的对应位置,加上以下一

解决小米、红米及其他 Android 手机无法在 Mac 下进行真机调试的问题(转)

转自:http://ju.outofmemory.cn/entry/103522 Begin iOS 2014-08-19 271 阅读 手机 Android 小米 mac 调试 在 Mac OSX 下做 Android 真机测试的时候,发现 Android Device Chooser 里,小米手机的状态显示为 unknown.但是手机的 USB 调试已经打开了.难道是因为驱动的问题?然而小米并没有提供 Mac 下的驱动程序. 注:小米手机打开 USB 调试模式的方法——在“关于手机”里,连续

为什么iphone手机比android手机流畅

作为当下最流行.市场占用份额最大的两大手机操作系统IOS和android,目前两者加起来的市场占用率达到90%.我曾经一直用android手机,没有用过iphone,那时候正直iphone4和iphone 4s十分流行的时候,十分火,我当时都是跟我的朋友们说我就是不喜欢iphone,有什么了不起的,android还不是一样,当然这个是我的屌丝心理,主要原因还是因为买不起,我相信直到现在都还是有跟我当时一样的人.我也一直不解为什么大家这么热棒iphone,难道就是纯粹炫耀?后来有幸,公司给我配了一

解决Javascript中$(window).resize()多次执行

有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个时候,我们需要在窗口拖动的时候去执行代码.但是有些时候,执行的操作比较复杂,我们只希望在窗口拖动完毕之后,在执行代码,否则极容易造成浏览器假死状态,这个时候该如何解决呢. 浏览器窗口发生改变 先来写一下窗口拖动时执行代码的函数,原生JS可用window.onresize Jquery可用$(window).resize(). window.onresize = function(){ console.

解决Javascript中$(window).resize()多次执行(转)

https://www.cnblogs.com/shuilangyizu/p/6816756.html 有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个时候,我们需要在窗口拖动的时候去执行代码.但是有些时候,执行的操作比较复杂,我们只希望在窗口拖动完毕之后,在执行代码,否则极容易造成浏览器假死状态,这个时候该如何解决呢. 浏览器窗口发生改变 先来写一下窗口拖动时执行代码的函数,原生JS可用window.onresize Jquery可用$(wind