HTML5がモバイルコピー機能を実装

私がこの需要に初めて出会ったのは、Baidu 経由だったのですが、基本的に js で実装されており、互換性が非常に悪いことがわかりました。

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

 -webkit-touch-callout: すべて;-webkit-user-select: すべて;-moz-user-select: すべて;-ms-user-select: すべて;user-select: すべて;

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

Clipboard.js は貼り付けやコピーに非常に強力なプラグインですが、モバイル端末で使用すると互換性の問題が発生する可能性があります。これが私がよく使う解決策です。

html

 <input id=foo1 value=http://www.shellad.com/_2SP__22 (コピーするコンテンツ) readonly=readonly><div class=the_btn_con><button class=btn data-clipboard-target=#foo1>Copy< /ボタン></div>

js

 $(function () { var Clipboard = new Clipboard('.btn'); //正常なダウングレード: Safari バージョン番号 >=10 の場合、コピーが成功したことを示すメッセージが表示されます。それ以外の場合は、コピーを手動で選択する必要があることを示すメッセージが表示されます。テキストの選択 Clipboard.on ('success', function(e) {alert('コピーに成功しました!') console.log($(this)) e.clearSelection(); });関数(e) { alert('コピーするにはコピーを選択してください!') });

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

上記は、編集者によって紹介されたモバイル コピー機能の HTML5 実装です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！