So aktivieren Sie HTML5 für die Implementierung der mobilen Kopierfunktion

In diesem Artikel wird hauptsächlich HTML5 zum Implementieren der mobilen Kopierfunktion vorgestellt. Der Artikel stellt auch den Implementierungscode für die Verwendung von clipboard.js zum Implementieren der mobilen Einfüge- und Kopierfunktion vor

Erste Begegnung Als es um diese Anforderung ging, schaute ich mir verschiedene Baidu an, stellte jedoch fest, dass sie grundsätzlich mit js implementiert wurden und die Kompatibilität sehr schlecht war.

Aber beim Suchen und Ausprobieren habe ich festgestellt, dass es nur mit CSS-Code vollständig realisiert werden kann. Fügen Sie einfach die folgenden Codezeilen zum Tag hinzu, der den Inhalt kopieren muss.

-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 wird, das Standardmenü des Systems nicht deaktiviert wird und durch langes Drücken das angezeigt wird Zum Kopieren steht Ihnen eine systemeigene Kopierfunktion zur Verfügung.

Verwenden Sie clipboard.js, um mobiles Einfügen und Kopieren zu realisieren

clipboard.js ist ein sehr leistungsfähiges Einfügen- und Kopier-Plug-in, aber auf mobile Bei der Verwendung am Ende können Kompatibilitätsprobleme auftreten. Hier ist eine Lösung, die ich oft verwende.

html

<input id="foo1"  value="http://www.shellad.com/_2SP__22（要复制的内容）" readonly="readonly">
<p class="the_btn_con"><button class="btn" data-clipboard-target="#foo1">复制</button></p>

js

$(function () {
       var clipboard = new Clipboard('.btn');
       //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
       clipboard.on('success', function(e) {
           alert('复制成功!')
           console.log($(this))
           e.clearSelection();
       });
       clipboard.on('error', function(e) {
           alert('请选择“拷贝”进行复制!')
       });
   })

Hinweis: Ich speichere Verwenden Sie beim Kopieren von Inhalten das Eingabesteuerelement, nicht p oder span. Denn beim Testen weist nur die Eingabe die beste Kompatibilität auf, verursacht keine Probleme und kann eine normale Replikation gewährleisten. Gleichzeitig unterstützt dieses Plug-in die Safari-Versionsnummer

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So implementieren Sie HTML5-Seiten-Audio und -Video für die automatische Wiedergabe unter WeChat und der App

H5-Handy-Bild-Upload Plug-in-Code

Das obige ist der detaillierte Inhalt vonSo aktivieren Sie HTML5 für die Implementierung der mobilen Kopierfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!