この記事では、モバイル側のコピー機能の 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 サイトの他の関連記事を参照してください。