Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

不言
Freigeben: 2018-06-11 16:29:28
Original
5410 Leute haben es durchsucht

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;
Nach dem Login kopieren

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>
Nach dem Login kopieren

js

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage