Kopieren Sie mit Javascript in iOS in die Zwischenablage

75

Ich verwende diese Funktion, um eine URL in die Zwischenablage zu kopieren:

function CopyUrl($this){

  var querySelector = $this.next().attr("id");
  var emailLink = document.querySelector("#"+querySelector);

  var range = document.createRange();
  range.selectNode(emailLink);  
  window.getSelection().addRange(range);  

  try {  
    // Now that we've selected the anchor text, execute the copy command  
    var successful = document.execCommand('copy', false, null);
    var msg = successful ? 'successful' : 'unsuccessful'; 

    if(true){
        $this.addClass("copied").html("Copied");
    }

  } catch(err) {  
    console.log('Oops, unable to copy');  
  }  

  // Remove the selections - NOTE: Should use   
  // removeRange(range) when it is supported  
  window.getSelection().removeAllRanges();
}

In Desktop-Browsern funktioniert alles einwandfrei, jedoch nicht auf iOS-Geräten, auf denen meine Funktion erfolgreich zurückgegeben wird, die Daten jedoch überhaupt nicht in die Zwischenablage kopiert werden. Was verursacht das und wie kann ich dieses Problem lösen?

Nino Amisulashvili
quelle

Antworten:

128

Aktualisieren! iOS> = 10

Sieht so aus, als ob es mit Hilfe von Auswahlbereichen und ein wenig Hack möglich ist, auf iOS (> = 10) Safari direkt in die Zwischenablage zu kopieren. Ich persönlich habe dies auf iPhone 5C iOS 10.3.3 und iPhone 8 iOS 11.1 getestet. Es scheint jedoch einige Einschränkungen zu geben:

  1. Text kann nur von <input>und <textarea>Elementen kopiert werden.
  2. Wenn sich das Element, das den Text enthält, nicht in a befindet <form>, muss es sein contenteditable.
  3. Das Element, das den Text enthält, darf nicht sein readonly(obwohl Sie es versuchen können, ist dies keine "offizielle" Methode, die irgendwo dokumentiert ist).
  4. Der Text innerhalb des Elements muss sich im Auswahlbereich befinden.

Um alle vier dieser "Anforderungen" abzudecken, müssen Sie:

  1. Fügen Sie den zu kopierenden Text in ein <input>oder <textarea>-Element ein.
  2. Speichern Sie die alten Werte von contenteditableund readonlydes Elements, um sie nach dem Kopieren wiederherstellen zu können.
  3. Wechseln Sie contenteditablezu trueund readonlyzu false.
  4. Erstellen Sie einen Bereich , um das gewünschte Element auszuwählen, und fügen Sie es der Fensterauswahl hinzu.
  5. Stellen Sie den Auswahlbereich für das gesamte Element ein.
  6. Stellen Sie die vorherigen contenteditableund readonlyWerte wieder her.
  7. Ausführen execCommand('copy').

Dadurch wird das Caret des Geräts des Benutzers verschoben und der gesamte Text in dem gewünschten Element ausgewählt. Anschließend wird automatisch der Kopierbefehl ausgegeben. Der Benutzer sieht den ausgewählten Text und der Tooltip mit den Optionen Auswählen / Kopieren / Einfügen wird angezeigt.

Das sieht ein bisschen kompliziert und zu umständlich aus, um nur einen Kopierbefehl auszugeben. Ich bin mir also nicht sicher, ob dies eine beabsichtigte Designentscheidung von Apple war, aber wer weiß ... in der Zwischenzeit funktioniert dies derzeit unter iOS> = 10 .

Vor diesem Hintergrund könnten Polyfills wie diese verwendet werden, um diese Aktion zu vereinfachen und browserübergreifend kompatibel zu machen (danke @Toskan für den Link in den Kommentaren).

Arbeitsbeispiel

Zusammenfassend sieht der Code, den Sie benötigen, folgendermaßen aus:

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');
}

Beachten Sie, dass der elParameter für diese Funktion ein <input>oder ein sein muss <textarea>.

Alte Antwort: frühere iOS-Versionen

Unter iOS <10 gibt es einige Einschränkungen für Safari (die eigentlich Sicherheitsmaßnahmen sind) für die Zwischenablage-API :

  • Es löst copyEreignisse nur für eine gültige Auswahl cutund pastenur in fokussierten bearbeitbaren Feldern aus.
  • Es unterstützt nur das Lesen / Schreiben der OS-Zwischenablage über Tastenkombinationen, nicht über document.execCommand(). Beachten Sie, dass "Shorcut-Taste" eine anklickbare (z. B. Aktionsmenü zum Kopieren / Einfügen oder benutzerdefinierte iOS-Tastaturkürzel) oder physische Taste (z. B. verbundene Bluetooth-Tastatur) bedeutet.
  • Der ClipboardEventKonstruktor wird nicht unterstützt .

Daher ist es (zumindest ab sofort) nicht möglich, Text / Wert in der Zwischenablage auf einem iOS-Gerät mithilfe von Javascript programmgesteuert zu kopieren . Nur der Benutzer kann entscheiden, ob er etwas kopiert.

Es ist jedoch möglich, etwas programmgesteuert auszuwählen , so dass der Benutzer nur den in der Auswahl angezeigten Tooltip "Kopieren" drücken muss. Dies kann mit genau dem gleichen Code wie oben erreicht werden, indem nur der entfernt wird execCommand('copy'), was in der Tat nicht funktionieren wird.

Marco Bonelli
quelle
@ Peege151 "Shorcut-Taste" bedeutet eine anklickbare (z. B. normales Aktionsmenü zum Kopieren / Einfügen oder benutzerdefinierte iOS-Tastenkombination) oder physische Taste (z. B. verbundene Bluetooth-Tastatur usw.). Jedenfalls etwas, das vom Benutzer ausgelöst wird und nicht programmgesteuert.
Marco Bonelli
@ MarcoBonelli, schöne Antwort. Ich habe eine relevante Frage, während der Benutzer auf Kopieren drückt (iOS-Tastenkombination), muss ich ihn / sie auf eine andere Seite umleiten. Wie es geht?
Md Mahbubur Rahman
Programmatisch bedeutet fast immer von einem Benutzer ausgelöstes Ereignis wie ein Klick .. aber es funktioniert immer noch nicht für mich
Dominic
@DominicTobias Wenn Sie zwei Minuten damit verbringen, meine Antwort zu lesen, werden Sie vielleicht verstehen, warum es nicht funktioniert. Ich buchstäblich sagen , dass „es nicht möglich ist programmatisch kopieren [...]“ .
Marco Bonelli
1
@Cymro Ja, es ist exklusiv für iOS. Sie brauchen nicht all das Zeug, um dies unter Windows zu tun. Es gibt viele Beiträge und Antworten, die erklären, wie es geht.
Marco Bonelli
48

Ich habe nach einigen Lösungen gesucht und eine gefunden, die tatsächlich funktioniert: http://www.seabreezecomputers.com/tips/copy2clipboard.htm

Grundsätzlich könnte ein Beispiel so etwas sein wie:

var $input = $(' some input/textarea ');
$input.val(result);
if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
  var el = $input.get(0);
  var editable = el.contentEditable;
  var readOnly = el.readOnly;
  el.contentEditable = 'true';
  el.readOnly = 'false';
  var range = document.createRange();
  range.selectNodeContents(el);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  el.setSelectionRange(0, 999999);
  el.contentEditable = editable;
  el.readOnly = readOnly;
} else {
  $input.select();
}
document.execCommand('copy');
$input.blur();
Marko Milojevic
quelle
4
Funktioniert auf meinem iOS 10 Gerät!
Rikard Askelöf
Es funktioniert unter iOS 10, danke! Ersetzen Sie in Ihrem Beispiel nur ein kleines Detail und ersetzen Sie "Ergebnis", eine undefinierte Variable für den tatsächlichen Text, den Sie in die Zwischenablage einfügen möchten.
David V
1
Funktioniert. Unter iOS wird die Tastatur geöffnet und in Sekundenbruchteilen geschlossen. Aber Sie können die Tastatur sehen.
Pixelbildschirm
2
Netter Dank, Sie können die Tastatur ganz vermeiden, indem Sie readOnly auf true anstelle von false setzen @pixelscreen
Dominic
3
Ja funktioniert! Und ich bestätige, dass der Kommentar von @DominicTobias (set readOnly = true) auch funktioniert.
Cesar
34

Dies ist meine browserübergreifende Implementierung

Sie können es testen, indem Sie das folgende Snippet ausführen

Beispiel:

copyToClipboard("Hello World");

/**
 * Copy a string to clipboard
 * @param  {String} string         The string to be copied to clipboard
 * @return {Boolean}               returns a boolean correspondent to the success of the copy operation.
 */
function copyToClipboard(string) {
  let textarea;
  let result;

  try {
    textarea = document.createElement('textarea');
    textarea.setAttribute('readonly', true);
    textarea.setAttribute('contenteditable', true);
    textarea.style.position = 'fixed'; // prevent scroll from jumping to the bottom when focus is set.
    textarea.value = string;

    document.body.appendChild(textarea);

    textarea.focus();
    textarea.select();

    const range = document.createRange();
    range.selectNodeContents(textarea);

    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);

    textarea.setSelectionRange(0, textarea.value.length);
    result = document.execCommand('copy');
  } catch (err) {
    console.error(err);
    result = null;
  } finally {
    document.body.removeChild(textarea);
  }

  // manual copy fallback using prompt
  if (!result) {
    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
    const copyHotkey = isMac ? '⌘C' : 'CTRL+C';
    result = prompt(`Press ${copyHotkey}`, string); // eslint-disable-line no-alert
    if (!result) {
      return false;
    }
  }
  return true;
}
Demo: <button onclick="copyToClipboard('It works!\nYou can upvote my answer now :)') ? this.innerText='Copied!': this.innerText='Sorry :(' ">Click here</button>

<p>
  <textarea placeholder="(Testing area) Paste here..." cols="80" rows="4"></textarea>
</p>

HINWEIS: Es funktioniert nicht, wenn es nicht vom Benutzer initiiert wird, wie z. B. Zeitüberschreitungen oder asynchrone Ereignisse!

Es muss von einem vertrauenswürdigen Ereignis stammen, wie es von einem clickEreignis auf einer Schaltfläche aufgerufen wurde

Vitim.us
quelle
1
Funktioniert für mich auf Safari iOS und Chrome Web getestet.
Omar
Arbeitete an Edge für mich, habe noch nicht auf iOS getestet
JohnC
2
Empfehlung: Entfernen Sie textarea.focus();aus der vorgeschlagenen Lösung - ansonsten wird unabhängig von der Einstellung nach unten gescrollttextarea.style.position = 'fixed';
Hassan Baig
Haben Sie eine Idee, wie Sie dies tun können, wenn es nicht von einem vertrauenswürdigen Ereignis wie einem Klickereignis stammt?
Coder
23

Problem: iOS Safari lässt nur document.execCommand('copy')Text in einem contentEditableContainer zu.

Lösung: Erkennen Sie iOS Safari und schalten Sie contentEditablevor der Ausführung schnell um document.execCommand('copy').

Die folgende Funktion funktioniert in allen Browsern. Aufruf mit einem CSS Selector oder HTMLElement :

function copyToClipboard(el) {

    // resolve the element
    el = (typeof el === 'string') ? document.querySelector(el) : el;

    // handle iOS as a special case
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {

        // save current contentEditable/readOnly status
        var editable = el.contentEditable;
        var readOnly = el.readOnly;

        // convert to editable with readonly to stop iOS keyboard opening
        el.contentEditable = true;
        el.readOnly = true;

        // create a selectable range
        var range = document.createRange();
        range.selectNodeContents(el);

        // select the range
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        el.setSelectionRange(0, 999999);

        // restore contentEditable/readOnly to original state
        el.contentEditable = editable;
        el.readOnly = readOnly;
    }
    else {
        el.select();
    }

    // execute copy command
    document.execCommand('copy');
}
input { font-size: 14px; font-family: tahoma; }
button { font-size: 14px; font-family: tahoma; }
<input class="important-message" type="text" value="Hello World" />
<button onclick="copyToClipboard('.important-message')">Copy</button>

John Doherty
quelle
1
Hinweis: Bei Verwendung des obigen Ansatzes bei Verwendung von iOS 10 und 11 wurden einige zusätzliche Einschränkungen festgestellt. A) Die Eingabe muss eine ausreichende Breite haben. Das Festlegen einer Breite von Null oder 1 Pixel in Ihrem CSS funktioniert nicht, wenn Sie gehofft haben, eine Eingabe zu kopieren, die der Benutzer nicht sehen kann. (Wie groß? Wer weiß?) Das Einstellen einer relativen Position außerhalb des Bildschirms scheint immer noch in Ordnung zu sein. b) Wenn Sie event.preventDefault () hinzufügen, beachten Sie, dass das Popup für Tastatureingaben (oder Formularnavigationseingaben?) umgeschaltet wird, wodurch der Effekt der Verwendung negiert wird readOnly. Hoffe das hilft anderen!
Matthew Dean
11

Bitte überprüfen Sie meine Lösung.

Es funktioniert auf Safari (getestet auf iPhone 7 und iPad) und in anderen Browsern.

window.Clipboard = (function(window, document, navigator) {
    var textArea,
        copy;

    function isOS() {
        return navigator.userAgent.match(/ipad|iphone/i);
    }

    function createTextArea(text) {
        textArea = document.createElement('textArea');
        textArea.value = text;
        document.body.appendChild(textArea);
    }

    function selectText() {
        var range,
            selection;

        if (isOS()) {
            range = document.createRange();
            range.selectNodeContents(textArea);
            selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            textArea.setSelectionRange(0, 999999);
        } else {
            textArea.select();
        }
    }

    function copyToClipboard() {        
        document.execCommand('copy');
        document.body.removeChild(textArea);
    }

    copy = function(text) {
        createTextArea(text);
        selectText();
        copyToClipboard();
    };

    return {
        copy: copy
    };
})(window, document, navigator);

// How to use
Clipboard.copy('text to be copied');

https://gist.github.com/rproenca/64781c6a1329b48a455b645d361a9aa3 https://fiddle.jshell.net/k9ejqmqt/1/

Hoffe das hilft dir.

Grüße.

Rodrigo
quelle
4

Meine Lösung wurde erstellt, indem andere Antworten von dieser Seite kombiniert wurden.

Im Gegensatz zu den anderen Antworten ist es nicht erforderlich, dass Sie bereits ein Element auf der Seite haben. Es wird ein eigenes Textfeld erstellt und anschließend das Chaos beseitigt.

function copyToClipboard(str) {
    var el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style = {position: 'absolute', left: '-9999px'};
    document.body.appendChild(el);

    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
        // save current contentEditable/readOnly status
        var editable = el.contentEditable;
        var readOnly = el.readOnly;

        // convert to editable with readonly to stop iOS keyboard opening
        el.contentEditable = true;
        el.readOnly = true;

        // create a selectable range
        var range = document.createRange();
        range.selectNodeContents(el);

        // select the range
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        el.setSelectionRange(0, 999999);

        // restore contentEditable/readOnly to original state
        el.contentEditable = editable;
        el.readOnly = readOnly;
    } else {
        el.select(); 
    }

    document.execCommand('copy');
    document.body.removeChild(el);
}
Eric Seastrand
quelle
@Jonah lassen Sie es mich wissen , was man von den anderen Lösungen auf dieser Seite tut für Sie arbeiten. Auf diese Weise kann ich meine Antwort verbessern, um anderen zu helfen.
Eric Seastrand
1
Hey Eric, eigentlich keiner von ihnen. Ich habe alles versucht und denke, dass dies auf einem iPhone (ich bin auf iOS 12) auf Safari nicht möglich ist. Bitte lmk, wenn ich falsch liege - ich würde eine Lösung lieben - und vielleicht eine Geige zu einer funktionierenden Lösung posten und ich werde auf meinem Handy testen.
Jonah
@EricSeastrand Ich versuche, diese Lösung und range.selectNodeContents (el) zu implementieren. ist reduziert Ich denke, wenn der Bereich reduziert ist, wird bei der Ausführung der Kopie nichts ausgewählt. Mein el ist ein Eingabetyp = "Text" mit einem Standardwert. Wissen Sie etwas darüber?
gwar9
@ Jonah Ich habe das gleiche Problem mit der IOS 12-Version. Haben Sie eine Lösung gefunden?
KiddoDeveloper
Nein, es war nicht möglich.
Jonah
2

Schön, hier ist der Typoskript-Refactor von oben, falls jemand interessiert ist (geschrieben als ES6-Modul):

type EditableInput = HTMLTextAreaElement | HTMLInputElement;

const selectText = (editableEl: EditableInput, selectionStart: number, selectionEnd: number) => {
    const isIOS = navigator.userAgent.match(/ipad|ipod|iphone/i);
    if (isIOS) {
        const range = document.createRange();
        range.selectNodeContents(editableEl);

        const selection = window.getSelection(); // current text selection
        selection.removeAllRanges();
        selection.addRange(range);
        editableEl.setSelectionRange(selectionStart, selectionEnd);
    } else {
        editableEl.select();
    }
};

const copyToClipboard = (value: string): void => {
    const el = document.createElement('textarea'); // temporary element
    el.value = value;

    el.style.position = 'absolute';
    el.style.left = '-9999px';
    el.readOnly = true; // avoid iOs keyboard opening
    el.contentEditable = 'true';

    document.body.appendChild(el);

    selectText(el, 0, value.length);

    document.execCommand('copy');
    document.body.removeChild(el);

};

export { copyToClipboard };
Kevin K.
quelle
2

Das hat bei mir funktioniert. Der Code wird in allen aktuellen Browsern getestet und funktioniert.

function copyToClipboard(textToCopy) {
  var textArea;

  function isOS() {
    //can use a better detection logic here
    return navigator.userAgent.match(/ipad|iphone/i);
  }

  function createTextArea(text) {
    textArea = document.createElement('textArea');
    textArea.readOnly = true;
    textArea.contentEditable = true;
    textArea.value = text;
    document.body.appendChild(textArea);
  }

  function selectText() {
    var range, selection;

    if (isOS()) {
      range = document.createRange();
      range.selectNodeContents(textArea);
      selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      textArea.setSelectionRange(0, 999999);
    } else {
      textArea.select();
    }
  }

  function copyTo() {
    document.execCommand('copy');
    document.body.removeChild(textArea);
  }

  createTextArea(textToCopy);
  selectText();
  copyTo();
}

Die Idee ist, einen gefälschten Textbereich zu erstellen, ihn zu DOM hinzuzufügen, contentEditable & readOnly als true festzulegen. Erstellen Sie einen Bereich, um das gewünschte Element auszuwählen, und fügen Sie es der Fensterauswahl hinzu. Stellen Sie den Auswahlbereich für das gesamte Element ein. Führen Sie dann execCommand ('copy') aus. Möglicherweise stellen Sie eine große Zahl (999999) in der setSelectionRange () -Methode fest. Nun, es soll alles abdecken, was sich innerhalb des Elements befinden könnte. Weitere Informationen zum Bereich finden Sie in den MDN-Dokumenten: https://developer.mozilla.org/en-US/docs/Web/API/Range

Testlauf (funktioniert in der folgenden Geräte- / Browserkombination)

iPhone (iOS> = 10) - Safari, Chrome

Android - Chrome, FF

Mac - Chrome, FF, Safari

Windows - Chrome, IE, FF

Ich habe Versionen nicht speziell erwähnt, da ich die neuesten Versionen getestet habe, die mir zum Zeitpunkt des Schreibens dieses Beitrags zur Verfügung standen. Hier ist eine detaillierte Beschreibung derselben: https://josephkhan.me/javascript-copy-clipboard-safari/

Joseph Khan
quelle
2

iOS 13.4 und neuer

Ab Version 13.4 unterstützt iOS Safari die moderne asynchrone Zwischenablage-API:

Wie bei allem in JavaScript ist die neuere API etwa 1000-mal besser, aber Sie benötigen immer noch einen groben Fallback-Code, da einige Ihrer Benutzer einige Jahre lang auf alten Versionen arbeiten werden.

So verwenden Sie die neue API für die Zwischenablage mit dem Code in der ursprünglichen Frage:

function CopyUrl($this){
  var querySelector = $this.next().attr("id");
  var emailLink = document.querySelector("#"+querySelector);

  if (navigator.clipboard) {
    var myText = emailLink.textContent;
    navigator.clipboard.writeText(myText).then(function() {
      // Do something to indicate the copy succeeded
    }).catch(function() {
      // Do something to indicate the copy failed
    });
  } else {
    // Here's where you put the fallback code for older browsers.
  }
}
nfagerlund
quelle
1

Dieser arbeitete für mich für ein schreibgeschütztes Eingabeelement.

copyText = input => {
    const isIOSDevice = navigator.userAgent.match(/ipad|iphone/i);

    if (isIOSDevice) {
        input.setSelectionRange(0, input.value.length);
    } else {
        input.select();
    }

    document.execCommand('copy');
};
Khaled Elgendy
quelle
Die Bedingung ist nicht notwendig, einfach input.setSelectionRange(0, input.value.length)kurz danach ausführen, input.selectda es nicht weh tut
Tom
1

Meine Funktion für iOS und andere Browser, die nach dem Testen auf iOS in die Zwischenablage kopiert wurden: 5c, 6,7

/**
 * Copies to Clipboard value
 * @param {String} valueForClipboard value to be copied
 * @param {Boolean} isIOS is current browser is Ios (Mobile Safari)
 * @return {boolean} shows if copy has been successful
 */
const copyToClipboard = (valueForClipboard, isIOS) => {
    const textArea = document.createElement('textarea');
    textArea.value = valueForClipboard;

    textArea.style.position = 'absolute';
    textArea.style.left = '-9999px'; // to make it invisible and out of the reach
    textArea.setAttribute('readonly', ''); // without it, the native keyboard will pop up (so we show it is only for reading)

    document.body.appendChild(textArea);

    if (isIOS) {
        const range = document.createRange();
        range.selectNodeContents(textArea);

        const selection = window.getSelection();
        selection.removeAllRanges(); // remove previously selected ranges
        selection.addRange(range);
        textArea.setSelectionRange(0, valueForClipboard.length); // this line makes the selection in iOS
    } else {
        textArea.select(); // this line is for all other browsers except ios
    }

    try {
        return document.execCommand('copy'); // if copy is successful, function returns true
    } catch (e) {
        return false; // return false to show that copy unsuccessful
    } finally {
        document.body.removeChild(textArea); // delete textarea from DOM
    }
};

obige Antwort zu contenteditable = true. Ich denke, gehört nur zu divs. Und für <textarea>ist nicht anwendbar.

Die isIOS-Variable kann als überprüft werden

const isIOS = navigator.userAgent.match(/ipad|ipod|iphone/i);

Mihey Mik
quelle
Diese Lösung hat für mich am besten funktioniert: funktioniert auf Safari Desktop und Safari Mobile (iOS). Außerdem bevorzuge ich diese Schnittstelle, da ich kein Eingabe- / Textfeld auswählen muss, sondern den Text nur durch Übergeben eines Arguments bereitstellen kann.
Samuel
0

Dies verbessert die Antwort von Marco, indem der Text als Variable übergeben werden kann. Dies funktioniert auf ios> 10. Dies funktioniert nicht unter Windows.

function CopyToClipboardIOS(TheText) {
  var el=document.createElement('input');
  el.setAttribute('style','position:absolute;top:-9999px');
  el.value=TheText;
  document.body.appendChild(el);
  var 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);
  document.execCommand('copy');
  el.remove();
}
Cymro
quelle
-1
<input id="copyIos" type="hidden" value="">
var clipboard = new Clipboard('.copyUrl');
                //兼容ios复制
                $('.copyUrl').on('click',function() {
                    var $input = $('#copyIos');
                    $input.val(share_url);
                    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
                        clipboard.on('success', function(e) {
                            e.clearSelection();
                            $.sDialog({
                                skin: "red",
                                content: 'copy success!',
                                okBtn: false,
                                cancelBtn: false,
                                lock: true
                            });
                            console.log('copy success!');
                        });
                    } else {
                        $input.select();
                    }
                    //document.execCommand('copy');
                    $input.blur();
                });
Quan Wu
quelle