Compatible with Android and iOS JavaScript copy paste

Source: Internet
Author: User

<! DOCTYPE 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.2bdocument.body.appendchild (tooltip); Else{var tooltip = document.getElementById ("Copy_tooltip")}tooltip.style.opacity = 1;tooltip.style.display = "Block"; Version 1.2btooltip.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 (/textare a|input/i) && El.value.length < 1) El.value = "";        IOS needs element not to is empty to select it and pop up ' paste ' button else if (El.innerHTML.length < 1) el.innerhtml = " "; IOS needs element not to is empty to select it and pops 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 would only select the text on non-form elements if contenteditable = true; El.readonly = false; IOS would 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 would only select a FORM element with select () if (El.setselectionrange && navigator.userAgent.ma TCH (/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 = "";}   Elsetooltip (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 (documen        T.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 would only select the text on non-form elements if contenteditable = true; El.readonly = false; IOS would 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 would only select a FORM element with select () if (El.setselectionrange && navigator.userAgent.ma TCH (/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.execcomm      and (' 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 (' Butto n ');//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]) >=)//Above caused:typeerror: ' null ' is not a object (evaluating ' Navigator.userAgent.match (/chrom (e|ium) \ ([0-9] +) \./[2] ') in Safariif (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 "Buttonios safari:selects All and pops up" copy "Buttonios 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-support copybut there is a bug in C  Hrome versions to makes it return "false". So in thoseversions 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

Compatible with Android and iOS JavaScript copy paste

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.