兼容Android 和 ios JavaScript copy paste

<!DOCTYPE html>

<html>

	<head>

		<title>关于我们Frame</title>

		<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">

		<meta name="copyright" content="www.acc5.com" />

		<style>

		</style>

		<script src="http://www.acc5.com/xueli/js/jquery-1.11.3.js"></script>

		<script src="http://app-static.acc5.com/app/copy2clipboard.js"></script>

	</head>

	<body>

		hello ,welcome!!!

		<input id="test" type='text' value='test text144' /><br>

		<button onclick="select_all_and_copy(document.getElementById('test'))">Copy to Clipboard</button>

	</body>

			<script>

			$().ready(function(){

					$('#test').val('test'+Math.random());

					try{

					  document.execCommand('copy');

					}catch(e){}

			})

			/*

			function iosCopyToClipboard(el) {

				var oldContentEditable = el.contentEditable,

					oldReadOnly = el.readOnly,

					range = document.createRange();

				el.contenteditable = true;

				el.readonly = false;

				range.selectNodeContents(el);

				var s = window.getSelection();

				s.removeAllRanges();

				s.addRange(range);

				el.setSelectionRange(0, 999999); // A big number, to cover anything that could be inside the element.

				el.contentEditable = oldContentEditable;

				el.readOnly = oldReadOnly;

				document.execCommand('copy');

			}

			iosCopyToClipboard(document.getElementById('test'))

			*/

		</script>

</html>

function tooltip(el, message)

{

	var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

	var x = parseInt(el.getBoundingClientRect().left) + scrollLeft + 10;

	var y = parseInt(el.getBoundingClientRect().top) + scrollTop + 10;

	if (!document.getElementById("copy_tooltip"))

	{

		var tooltip = document.createElement('div');

		tooltip.id = "copy_tooltip";

		tooltip.style.position = "absolute";

		tooltip.style.border = "1px solid black";

		tooltip.style.background = "#dbdb00";

		tooltip.style.opacity = 1;

		tooltip.style.transition = "opacity 0.3s";

		tooltip.style.zIndex = "1999999999"; // Version 1.2b

		document.body.appendChild(tooltip);

	}

	else

	{

		var tooltip = document.getElementById("copy_tooltip")

	}

	tooltip.style.opacity = 1;

	tooltip.style.display = "block"; // Version 1.2b

	tooltip.style.left = x + "px";

	tooltip.style.top = y + "px";

	tooltip.innerHTML = message;

	setTimeout(function() { tooltip.style.display = "none"; tooltip.style.opacity = 0; }, 2000);

}

function paste(el)

{

   	if (window.clipboardData) {

	   	// IE

    	el.value = window.clipboardData.getData('Text');

    	el.innerHTML = window.clipboardData.getData('Text');

    }

    else if (window.getSelection && document.createRange) {

        // non-IE

        if (el.tagName.match(/textarea|input/i) && el.value.length < 1)

        	el.value = " "; // iOS needs element not to be empty to select it and pop up 'paste' button

        else if (el.innerHTML.length < 1)

        	el.innerHTML = " "; // iOS needs element not to be empty to select it and pop up 'paste' button

        var editable = el.contentEditable; // Record contentEditable status of element

        var readOnly = el.readOnly; // Record readOnly status of element

       	el.contentEditable = true; // iOS will only select text on non-form elements if contentEditable = true;

       	el.readOnly = false; // iOS will not select in a read only form element

        var range = document.createRange();

        range.selectNodeContents(el);

        var sel = window.getSelection();

        sel.removeAllRanges();

        sel.addRange(range);

        if (el.nodeName == "TEXTAREA" || el.nodeName == "INPUT")

        	el.select(); // Firefox will only select a form element with select()

        if (el.setSelectionRange && navigator.userAgent.match(/ipad|ipod|iphone/i))

        	el.setSelectionRange(0, 999999); // iOS only selects "form" elements with SelectionRange

        if (document.queryCommandSupported("paste"))

       	{

			var successful = document.execCommand('Paste');

		    if (successful) tooltip(el, "Pasted.");

		    else

			{

				if (navigator.userAgent.match(/android/i) && navigator.userAgent.match(/chrome/i))

				{

					tooltip(el, "Click blue tab then click Paste");

						if (el.tagName.match(/textarea|input/i))

						{

			        		el.value = " "; el.focus();

			        		el.setSelectionRange(0, 0);

			        	}

			        	else

			        		el.innerHTML = "";

				}

				else

					tooltip(el, "Press CTRL-V to paste");

			}

		}

		else

		{

		    if (!navigator.userAgent.match(/ipad|ipod|iphone|android|silk/i))

				tooltip(el, "Press CTRL-V to paste");

		}

		el.contentEditable = editable; // Restore previous contentEditable status

        el.readOnly = readOnly; // Restore previous readOnly status

    }

}

function select_all_and_copy(el)

{

    // Copy textarea, pre, div, etc.

	if (document.body.createTextRange) {

        // IE

        var textRange = document.body.createTextRange();

        textRange.moveToElementText(el);

        textRange.select();

        textRange.execCommand("Copy");

		tooltip(el, "Copied!");

    }

	else if (window.getSelection && document.createRange) {

        // non-IE

        var editable = el.contentEditable; // Record contentEditable status of element

        var readOnly = el.readOnly; // Record readOnly status of element

       	el.contentEditable = true; // iOS will only select text on non-form elements if contentEditable = true;

       	el.readOnly = false; // iOS will not select in a read only form element

        var range = document.createRange();

        range.selectNodeContents(el);

        var sel = window.getSelection();

        sel.removeAllRanges();

        sel.addRange(range); // Does not work for Firefox if a textarea or input

        if (el.nodeName == "TEXTAREA" || el.nodeName == "INPUT")

        	el.select(); // Firefox will only select a form element with select()

        if (el.setSelectionRange && navigator.userAgent.match(/ipad|ipod|iphone/i))

        	el.setSelectionRange(0, 999999); // iOS only selects "form" elements with SelectionRange

        el.contentEditable = editable; // Restore previous contentEditable status

        el.readOnly = readOnly; // Restore previous readOnly status

	    if (document.queryCommandSupported("copy"))

	    {

			var successful = document.execCommand('copy');

		    if (successful) tooltip(el, "Copied to clipboard.");

		    else tooltip(el, "Press CTRL+C to copy");

		}

		else

		{

			if (!navigator.userAgent.match(/ipad|ipod|iphone|android|silk/i))

				tooltip(el, "Press CTRL+C to copy");

		}

    }

} // end function select_all_and_copy(el) 

function make_copy_button(el)

{

	//var copy_btn = document.createElement('button');

	//copy_btn.type = "button";

	var copy_btn = document.createElement('span');

	copy_btn.style.border = "1px solid black";

	copy_btn.style.padding = "5px";

	copy_btn.style.cursor = "pointer";

	copy_btn.style.display = "inline-block";

	copy_btn.style.background = "lightgrey";

	copy_btn.setAttribute("role", "button");

	copy_btn.setAttribute("tabindex", 0);

	el.parentNode.insertBefore(copy_btn, el.nextSibling);

	copy_btn.onclick = function() { select_all_and_copy(el); };

	//if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42)

	// Above caused: TypeError: 'null' is not an object (evaluating 'navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]') in Safari

	if (document.queryCommandSupported("copy"))

	{

		// Desktop: Copy works with IE 4+, Chrome 42+, Firefox 41+, Opera 29+

		// Mobile: Copy works with Chrome for Android 42+, Firefox Mobile 41+

		//copy_btn.value = "Copy to Clipboard";

		copy_btn.innerHTML = "Copy to Clipboard";

	}

	else

	{

		// Select only for Safari and older Chrome, Firefox and Opera

		/* Mobile:

				Android Browser: Selects all and pops up "Copy" button

				iOS Safari: Selects all and pops up "Copy" button

				iOS Chrome: Form elements: Selects all and pops up "Copy" button

		*/

		//copy_btn.value = "Select All";

		copy_btn.innerHTML = "Select All";

	}

}

/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy

	but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those

	versions of Chrome feature detection does not work!

	See https://code.google.com/p/chromium/issues/detail?id=476508

*/

from：http://www.seabreezecomputers.com/tips/copy2clipboard.htm

from：https://*.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios

兼容Android 和 ios JavaScript copy paste的更多相关文章

LocalResizeIMG前端HTML5本地压缩图片上传，兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
前言这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获在下才疏学浅, ...
GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举，越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造*的原则，了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目，有时能够让你达到事半功倍的效果。
1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便 ...
兼容安卓和ios实现一键复制内容到剪切板
实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
HTML5能取代Android和iOS应用程序吗？
大量新生移动设备的兴起,改变了互联网的未来.在技术的发展上,HTML5会取代App应用吗?或者说能够在多大程度上取代呢?在HTML5规范中,已经加入了相机.磁力罗盘.GPS信息的支持.很多新兴浏览器也 ...
H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
现在创业做App,先做 Android 还是 iOS？
随着互联网+的高速发展,现在创业大部分都是在布局移动端,初期往往摆在面前最大的难题是,如何分配有限的成本,在最快的速度内占领市场?这个大难题会影响创始人在团队和产品建设方方面面的决定.缩小至移动App ...
判断手机端用户打开页面时是android还是ios,并将判断结果通过ajax返回给url接口，传递回去
首先判断页面是android还是ios,然后利用ajax将结果通过接口url返回回去,记录到log日志中,以统计android和ios用户访问该页面的数量(数据统计) <script type= ...
ArcGIS Runtime SDKs v10&period;2&period;4最新（Android、iOS、OSX和&period;NET）
ArcGIS Runtime SDKs v10.2.4最新,它包含:Android.iOS.OS X和.NET四大平台,用户和开发人员可以登录Esri最新的SDK安装包.或者通过云盘下载(http:/ ...

随机推荐

HDU 4067 Random Maze
意甲冠军: 一个"随机图"它被定义为具有以下性质如: 一个入口和一个出口有向图对于入口出度比入度大1 对于出口入度比出度大1 对于其它点入度等于出度现给出一幅有向 ...
第4章建造者模式（Builder Pattern）
原文第4章建造者模式(Builder Pattern) 定义将一个复杂对象的构造与它的表示分离,使同样的构建过程可以创建不同的表示,这样的设计模式被称为建造者模式. 实用范围 1 当创建复杂对象 ...
HTML5周记（一）
各位开发者朋友和技术大神大家好!博主刚开始学习html5 ,自本周开始会每周更新技术博客,与大家分享每周所学.鉴于博主水品有限,如发现有问题的地方欢迎大家指正,有更好的意见和建议可在评论下方发表,我会 ...
可变卷积Deforable ConvNet 迁移训练自己的数据集 MXNet框架 GPU版
[引言] 最近在用可变卷积的rfcn 模型迁移训练自己的数据集, MSRA官方使用的MXNet框架环境搭建及配置:http://www.cnblogs.com/andre-ma/p/8867031. ...
spring配置上传文件大小
上传文件过大时,不会进入控制层,会直接抛出异常,提示上传文件过大,如下: org.apache.commons.fileupload.FileUploadBase$SizeLimitExceededE ...
[py][mx]django form验证-给db减压
django form认证-解压db压力一般系统都需要前后端都验证前端验证容器逃逸破解,如通过js console口去发试想如果后端只有db验证,那么前端无论发什么后端都查询一次db,对db压力 ...
VBA笔记（一）——基础配置
开启VBA编程环境——VBE 方法一:按<Alt+F11>组合建方法二:查看代码宏设置当然启用宏的设置方式不同,宏的启动方式也不一样. 首先打开“office 按钮”,选择“exce ...
mysql int 整数类型解释显示宽度和存储宽度
存储宽度是实际存储记录宽度存储宽度默认是写死的,就算修改宽度也改变不了,改变的是显示宽度 ============有符号和无符号int============= 创建一个无符号的 int 整数类 ...
nginx安装及其配置详细教程
1 nginx 介绍 1 什么是nginx Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 由俄罗斯的程序设计师Igor Sysoev所开发,官方 ...
Xamarin简介与Xamarin支持MVC设计模式
Create Native iOS, Android,Mac and Windows apps in C#. 官方网站:http://xamarin.com/ 使用武器 Run a C# app, g ...