兼容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://stackoverflow.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.2.4最新（Android、iOS、OSX和.NET）
ArcGIS Runtime SDKs v10.2.4最新,它包含:Android.iOS.OS X和.NET四大平台,用户和开发人员可以登录Esri最新的SDK安装包.或者通过云盘下载(http:/ ...
随机推荐
- C#设计模式之十九策略模式（Stragety Pattern）【行为型】
一.引言 今天我们开始讲“行为型”设计模式的第七个模式,该模式是[策略模式],英文名称是:Stragety Pattern.在现实生活中,策略模式的例子也非常常见,例如,在一个公司中,会有各种工作人员 ...
- JS隐藏号码中间4位
function resetPhone(phone) { var str = String(phone) var len = str.length; var prev,next; if (len &g ...
- Java基础-一文搞懂位运算
在日常的Java开发中,位运算使用的不多,使用的更多的是算数运算(+.-.*./.%).关系运算(<.>.<=.>=.==.!=)和逻辑运算(&&.||.!), ...
- float浮动的世界
loat有四个属性,分别是: float:none: 没有浮动: float:left: 左浮动: float:right: 右浮动: float:inherit:继承父元素的浮动: ------ ...
- 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align
一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...
- mybatis 自动生成文件配置
maven 依赖配置: <!-- sql server --><dependency> <groupId>com.microsoft.sqlserver</g ...
- oppor9手机怎么录制屏幕视频
我们已经进入互联网时代,每个人都寸步不离手机.电脑等电子产品,看到美丽好看的视频总想记录下来,毕竟看到喜欢的视频还真不太容易,所以问题来了,oppor9手机怎么录制屏幕视频呢?安卓手机上怎么录制屏幕视 ...
- Android Studio 之 注释模板
我们看有的项目的文档,会发现它的注释写的很好看,很规范. 而如果你的代码注释还是在用简单的 // 或者 /**/ ,那就学习一下在Android Studio中如何进行注释模板的设置 首先看下面代码 ...
- Android为TV端助力 事件分发机制
android事件分发机制,给控件设置ontouch监听事件,当ontouch返回true时,他就不会走onTouchEvent方法,要想走onTouchEvent方法只需要返回ontouch返回fa ...
- codeforces 735D Taxes(数论)
Maximal GCD 题目链接:http://codeforces.com/problemset/problem/735/D ——每天在线,欢迎留言谈论. 题目大意: 给你一个n(2≤n≤2e9) ...