2日前にH5のシェアを聞いた。会議には文がありました。私は非常に感動しました：それはあなたができないということではありませんが、あなた自身の要件が低すぎるということです。非常に単純な文章では、私は多くのことが誰にとっても不可能ではないと信じていますが、彼らは本当に自分自身に対して要件が低すぎます。あなた自身のためにもっと多くの要件を要求する場合、あなたはより大きな進歩を遂げるかもしれません。成長して以来、多くの友人は、自分自身が進歩を遂げようとする意欲を高める多くの言葉を聞いていますが、誰もがそれを続けることができるわけではありません。実際、これは彼らの性格と周囲の環境と関係があります。私はあなた自身を奨励するためのより多くの方法と条件を見つけることができ、あなた自身の要件を常に改善することができるとだけ言うことができます。そうすれば、あなたはより多くの成果を達成する機会を得ることができます。
今年の後半では、グループに「モバイル開発ガイド」と呼ばれるサイトを構築する予定です。 Webサイトのフレームワークを構築する過程で、クリップボードにテキストをコピーする必要がある関数があります。この機能は非常に一般的に使用されていると思いますが、JSコードを頻繁に書いていない私にとって大きな課題です。サイトを振り返って、window.clipboarddataを使用してクリップボード機能へのコピーを実現し、IEおよびFFブラウザのみをサポートします。当時、私はBaiduでいくつかの解決策を見つけましたが、我慢できなかったらあきらめました。その後、コードで判断を下しました。この属性がサポートされていない場合、私は直接警告します：この関数はブラウザをサポートしません。テキストボックスのコンテンツを手動でコピーしてください。今、私はそれについて考えています、私は本当に怠zyです。 hehe、誰もが撃たれましたか？
Alert（「この関数はこのブラウザをサポートしていません。テキストボックスにコンテンツを手動でコピーしてください」）;
実際、インターネット上のインターネットには、クリップボードへのコピーを実現するための詳細な説明はありません。多くの記事は同じ数千回です。コピーをクリップボード機能に使用する必要がある子供の靴にとっては非常に苦痛です。今日はこの部分を共有します。能力が限られているため、エラーに関するアドバイスを教えてください〜
WordPressを使用してサイトを構築した多くの学生は、JQueryを使用していることを知っていると思います。彼らはjQueryに不慣れではなく、非常に簡単に使用できます。残念ながら、jQuery自体はクリップボードにコピーする機能を認識していませんが、おそらくそのAPIにはこの機能があります。今回は、私が構築したサイトはWordPressを使用し、JqueryをクリップボードにコピーするためにAPIを検索するのに時間を費やしました。また、jquery zeroclipboardなので、WordPressのクリップボードにコピーを実装するために使用しました。しかし、JQuery Zeroclipboardは、ゼロクリップボードという父親であることが判明しました。
Zero Clipboardは、Zeroclipboard.jsとZeroclipboard.swfの2つのファイルが必要なコピーにフラッシュを使用するスタンドアロンJSライブラリです。インターネットには2つのバージョンがあります。実装の原則は、Flashを使用してコピーされます。私は誰の元の創造物が、または家族の二人の兄弟に属しているのかわかりませんので、私はこれを気にしません。著作権を自分自身で尊重し、明確な良心を表現する限り、私が今日あなたに紹介するバージョンは比較的簡単です。
まず、次の図を見てみましょう。ゼロクリップボードを使用した後に生成されたフラッシュオブジェクト。 Flash10および次のバージョンと互換性があり、すべてのブラウザーと互換性があります。
ゼロクリップボードの公式住所：http：//zeroclipboard.org/、githubアドレス：https：//github.com/zeroclipboard/zeroclipboard
それを使用してサーバー環境を構築します。一部の学生はそれについて明確ではないかもしれません。 Win7システムに付属するXPやIISなど、サーバー環境を構築するための多くの方法があります。 XAMPP、AppServ、APMSERV、その他の統合パッケージを使用してインストールすることもできます。構築するのは非常に簡単です。ここに紹介しません〜
次に、最初に独立したJSライブラリゼロクリップボードを使用して、単にクリップボード関数にコピーを実装するだけで、デモは次のとおりです。
<！doctype html> <html> <head> <title>ゼロクリップボードテスト</title> <meta charset = "utf-8"> </head> <body> <！ -
説明：
1.Data-Clipboard-TargetコピーするオブジェクトのIDを入力します
- > <ボタンID = "d_clip_button" data-clipboard-target = "fe_text"> <b> copy to lipboard </b> </button> <br/> <textarea id = "fe_text" cols = "50" rows = "3" src = "zeroclipboard.js"> </script> <スクリプトタイプ= "text/javascript"> //新しいコピーオブジェクトvarクリップ= new Zeroclipboard（document.getElementByid（ "d_clip_button"）、{ムービーパス： "zeroclipboard.swf"}）; function（client、args）{alert（ "Copy ressuly、copying content is："+ args.text）;}）; </script>デモのダウンロード（ウォームリマインダー：コードをダウンロードする学生、デモを閲覧するときにサーバー環境を使用することを忘れないでください。そうでなければ効果はありません〜）
ゼロクリップボードの関数は、上記のコードコメントに導入されています。その他の機能については、https：//github.com/zeroclipboard/zeroclipboardにアクセスしてください
次に、jquery zeroclipboardを紹介します
jQuery Zeroclipboardは、Zclip for Shortと呼ばれるZeroclipboardに基づく改善です。 jQueryのAPIとして、jQuery Zeroclipboardも非常に単純な操作を実行します。公式の住所はhttp://www.steamdev.com/zclip/
使用する前に、2つのjsファイルを参照する必要があります：jquery.jsおよびjquery.zclip.js
<script type = "text/javascript" src = "js/jquery.js"> </script> <script type = "text/javascript" src = "js/jquery.zclip.js"> </script>
次に、jquery.zclip.jsを使用して、次のようにクリップボードのデモを単純に実装するだけです。
<！doctype html> <html> <head> <title> zeroclipboardテスト</title> <meta charset = "utf-8"> <style type = "text/css"> -80px; background-color：rgba（0、0、0、0.2）; filter：progid：dmixegetransform.microsoft.gradient（startcolorstr =＃30000000、endcolorstr =＃30000000）;パディング：6px;} ＃f4d9a6; background-color：#fffdee; font-size：14px;} </style> <script type = "text/javascript" src = "jquery.js"> </script> <script = "text/javascript" src = "jquery.zclip.js"テキスト</h2> <a href = "＃none">クリックして私をコピーする</a> </div> <div> <div> <h2> demo2をクリックしてフォームのテキストをコピーします</h2> <a href = "＃none">コピー注文のテキストをクリックしてクリックして</a> <入力タイプ= "テキスト"値 " type = "text/javascript"> $（document）.ready（function（）{/*すべてのクラスをコピータグとして定義し、クリックしたオブジェクトのテキストをコピーできます。 Mouse*/$（this）.css（ "color"、 "orange"）;}、authcopy：function（）{/*copy*/var $ copysuc = $（ "<div class = 'copy-tips'> <div class = 'copy-tips-wrap'>☺コピー</div> </div> "）; $（" body "） "Zeroclipboard.swf"、copy：function（）{return $（this）.parent（）。find（ "。input"）。val（）;}、function（）{/* copying*/var $ copysuc = $（ "<div class = 'copy-tips'> <div class = 'copy-tips'>正常に</div> </div> "）; $（" body "）デモのダウンロード（ウォームリマインダー：コードをダウンロードする学生、デモを閲覧するときにサーバー環境を使用することを忘れないでください。そうでなければ効果はありません〜）
上記のコードは、jQueryの操作ノードの関数を組み合わせて、コピーの前後など、jquery.zclip.jsの役割を再生し、ノードを動的に挿入します。また、jquery.zclip.jsの力が非常に簡単に使用できることもわかります。 jquery.zclip.jsの関数について詳しく知る必要がある場合は、http：//www.steamdev.com/zclip/にアクセスしてください。
上記の独立したJSライブラリからZeroclipboard.jsおよびjquery.zclip.jsはどちらもフラッシュを使用してクリップボードへのコピーの機能を実装します。 Zeroclipboard.jsを使用すると、機能が比較的少ないことがわかりますが、それは比較的小さなファイルを持つ独立したライブラリです。 jquery.zclip.jsを使用した後の関数は比較的豊富です。ただし、jQueryフレームワークを使用していないサイトの場合、jquery.zclip.jsを使用することはブロードバンドの無駄です。使用するコピー方法は、製品の特定の位置付けに依存します〜
上記は、エディターが紹介したクリップボード関数にコンテンツをコピーするJS実装が、すべてのブラウザーと互換性がある（推奨）。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！