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

この記事では、モバイル側のコピー機能の 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('.btn');
       //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
       clipboard.on('success', function(e) {
           alert('复制成功!')
           console.log($(this))
           e.clearSelection();
       });
       clipboard.on('error', function(e) {
           alert('请选择“拷贝”进行复制!')
       });
   })

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

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

関連する推奨事項:

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

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

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