HTML5でモバイルコピー機能を実装できるようにする方法

不言
リリース: 2018-06-11 16:29:28
オリジナル
5415 人が閲覧しました

この記事では、モバイル側のコピー機能の HTML5 実装を主に紹介します。この記事では、Clipboard.js を使用してモバイル側の貼り付けとコピー機能を実現する実装コードも紹介します。このニーズに遭遇したときに最初に行うことは、Baidu を試してみましたが、基本的に js を使用して実装されており、互換性が非常に悪いことがわかりました。

しかし、検索して試してみると、コンテンツをコピーする必要があるタグに次のコード行を追加するだけで完全に実現できることがわかりました。

-webkit-touch-callout: all;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
ログイン後にコピー

実際、これはユーザーのコンテンツ操作が制限されておらず、システムのデフォルトメニューが無効になっていないことを意味し、長押しするとシステム独自のコピー機能が表示されます。

モバイル端末でペーストとコピーを実現するにはclipboard.jsを使用してくださいclipboard.jsはペーストとコピーを行うための非常に強力なプラグインですが、モバイル端末で使用すると互換性の問題が発生します。これが私がよく使う解決策です。

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(&#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;)
       });
   })
ログイン後にコピー

コピーするコンテンツを保存するときは、p または scan の代わりに入力コントロールを使用することに注意してください。テスト中は入力のみが最適な互換性を持ち、問題を引き起こさず、正常なレプリケーションを保証できるためです。同時に、このプラグインは Safari バージョン番号 10 未満をサポートしていないため、この点にご注意ください。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

WeChat とアプリで自動的に再生する HTML5 ページのオーディオとビデオを実装する方法

H5 携帯電話画像アップロード プラグイン コード

以上がHTML5でモバイルコピー機能を実装できるようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート