Flash_jquery を使用せずに jQuery を使用してテキストをクリップボードにコピーする

インターネット上のクリップボードに特定のテキストをコピーする方法を探している場合、最も可能性の高い結果は、Flash を使用してこの問題を解決することですが、これは賢明なアイデアではありません。この製品は最終的には消滅するか、少なくともブラウザでサポートされなくなるため、このソリューションには未来がありません。 jQuery や純粋な JavaScript を使用することも、あるいは完全に自分で記述することも可能ですが、誰かがすでにソリューションを作成しているのに、なぜ車輪の再発明をする必要があるでしょうか? Clipboard.js を見てみましょう。

Clipboard.js は Flash コンポーネントを削除し、この問題をエレガントに解決します。スクリプトを導入し、HTML タグに「data-clipboard-target」属性を割り当て、短いコードを記述するだけです。段落の JavaScript スニペット。通貨換算アプリケーションのデモとして、1 つのテキスト ボックスに値を入力すると、換算結果が別のテキスト ボックスに表示され、テキスト ボックスがクリックされると、その値がクリップボードにコピーされ、メッセージが表示されます。

以下は私の実装です。

これがテキスト ボックスだと仮定します。 (アプリケーションの作成には MVC フレームワークを使用します)

<divclass="row"><divclass="col-md-6">From<divclass="input-group">
<divclass="input-group-addon">$</div>
@Html.EditorFor(model=>model.AmountFrom,new{htmlAttributes=new{@class="form-controlinput-largest",@step="0.01",@type="number"}})
</div></div><divclass="col-md-6">To<divclass="input-group"><divclass="input-group-addon">$
</div><inputtype="text"id="AmountTo"value="@Model.AmountTo"class="form-controlinput-largest"readonlydata-clipboard-action="copy"data-clipboard-target="#AmountTo"/>
</div>
</div>
</div>

AmountTo と AmountFrom があることに気づきましたか。これをクリックすると、その値がクリップボードに渡されます。この魔法は「data-clipboard-target」プロパティ内で起こります。

コピー アクション メッセージを表示するメッセージ ボックスも追加します

<divclass="row">
<divclass="col-md-6"><br/>
<spanid="messageBox"class="text-success"style="display:block;text-align:center"></span></div></div>

これが注目する HTML 部分です。次に、JavaScript/jQuery の部分に進みましょう

<scriptsrc="~/Scripts/clipboard.min.js">
</script>
<script>varclipboard=newClipboard(&apos;#AmountTo&apos;);
clipboard.on(&apos;success&apos;,function(e){$("#messageBox").text("AmountSuccessfullyCopied!").show().fadeOut(2000);e.clearSelection();});clipboard.on(&apos;error&apos;,function(e){$("#messageBox").text("ErrorCopyingAmount").show().fadeOut(2000);});$(&apos;#AmountFrom&apos;).click(function(){$("#AmountFrom").val("");});
</script>

この時点では、clipoard.js を導入しただけであることがわかります。クリップボードが正常にインスタンス化されると、いくつかのアクションがイベントに割り当てられます。そうでない場合は、エラーがトリガーされます。これはすべて問題なく、以下のようなメッセージが表示される IE を除くすべての最新ブラウザで動作します。

実際の動作を確認したい場合は、JSFiddle の例をご覧ください。

次のステップは、クリップボードのデータを取得し、クリックされたときにテキスト ボックスに自動的に貼り付けることです。この時点では、セキュリティ上のリスクによりブラウザがそれを阻止するようですが、見つけるか作成してみます。解決策なので、誰もが引き続き注意を払う必要があります。