HTML5 implementiert die mobile Kopierfunktion

Das erste Mal, dass ich dieser Nachfrage begegnete, war über verschiedene Baidu, aber ich stellte fest, dass sie grundsätzlich mit js implementiert wurden und die Kompatibilität sehr schlecht war.

Beim Suchen und Ausprobieren habe ich jedoch festgestellt, dass es nur mit CSS-Code vollständig implementiert werden kann. Fügen Sie einfach die folgenden Codezeilen zu den Tags hinzu, die den Inhalt kopieren müssen.

 -webkit-touch-callout: all;-webkit-user-select: all;-moz-user-select: all;-ms-user-select: all;user-select: all;

Tatsächlich bedeutet dies, dass die Bedienung des Inhalts durch den Benutzer nicht eingeschränkt ist und das Standardmenü des Systems nicht deaktiviert ist. Durch langes Drücken wird die systemeigene Kopierfunktion zum Kopieren angezeigt.

clipboard.js ist ein sehr leistungsfähiges Plug-in zum Einfügen und Kopieren, bei der Verwendung auf dem mobilen Endgerät können jedoch Kompatibilitätsprobleme auftreten. Hier ist eine Lösung, die ich oft verwende.

html

 <input id=foo1 value=http://www.shellad.com/_2SP__22 (zu kopierender Inhalt) readonly=readonly><div class=the_btn_con><button class=btn data-clipboard-target=#foo1>Copy< /button></div>

js

 $(function () { var clipboard = new Clipboard('.btn'); //Anmutiges Downgrade: Safari-Versionsnummer >=10, fordert Sie auf, dass die Kopie erfolgreich war; andernfalls werden Sie aufgefordert, die Kopie danach manuell auszuwählen Auswählen des Textes clipboard.on ('success', function(e) { Alert('Copy success!') console.log($(this)) e.clearSelection(); }); Funktion(e) { warning('Bitte zum Kopieren auswählen!') } });

Beachten Sie, dass ich beim Speichern des zu kopierenden Inhalts ein Eingabesteuerelement anstelle eines Divs oder Spans verwende. Denn beim Testen weist nur die Eingabe die beste Kompatibilität auf, verursacht keine Probleme und kann eine normale Replikation garantieren. Gleichzeitig unterstützt das Plug-in die Safari-Versionsnummer <10 nicht. Bitte beachten Sie dies.

Das Obige ist die vom Herausgeber eingeführte HTML5-Implementierung der mobilen Kopierfunktion. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!