Flash_jquery を使用せずに jQuery を使用してテキストをクリップボードにコピーする-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:03:45

オリジナル

1315 人が閲覧しました

インターネット上のクリップボードに特定のテキストをコピーする方法を探している場合、最も可能性の高い結果は、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 を除くすべての最新ブラウザで動作します。