Salin teks ke papan keratan menggunakan jQuery tanpa Flash_jquery

Jika anda mencari penyelesaian tentang cara menyalin teks tertentu ke papan keratan di Internet, hasil yang paling mungkin adalah menggunakan Flash untuk melakukan ini Walaupun menggunakan Flash boleh menyelesaikan masalah ini dengan baik, ini Bukan idea yang bijak produk ini akhirnya akan hilang atau sekurang-kurangnya tidak lagi disokong oleh pelayar jadi penyelesaian ini tidak mempunyai masa depan. Anda boleh menggunakan jQuery atau JavaScript tulen, atau menulisnya sepenuhnya sendiri, tetapi mengapa mencipta semula roda apabila seseorang telah mencipta penyelesaian? Mari lihat Clipboard.js.

Clipboard.js mengalih keluar komponen Flash dan menyelesaikan masalah ini dengan elegan Apa yang anda perlu lakukan ialah memperkenalkan skripnya, tetapkan atribut "data-clipboard-target" pada teg HTML dan tulis pendek. perenggan coretan JavaScript. Untuk menunjukkan aplikasi penukaran mata wang, apabila anda memasukkan nilai dalam satu kotak teks, hasil penukaran dipaparkan dalam kotak teks lain Apabila kotak teks diklik, peristiwa dicetuskan untuk menyalinnya ke papan keratan dan memaparkan mesej.

Berikut ialah pelaksanaan saya.

Andaikan ini kotak teks anda. (Saya menggunakan rangka kerja MVC untuk mencipta aplikasi saya)

<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>

Adakah anda perasan bahawa saya mempunyai AmountTo dan AmountFromTo ialah input dan AmountFrom ialah output Apabila kita mengklik ini, nilainya akan dihantar ke papan keratan. Keajaiban berlaku di dalam harta "data-clipboard-target".

Kami juga menambah kotak mesej untuk memaparkan mesej tindakan salin

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

Ini ialah bahagian HTML yang anda minati. Sekarang mari pergi ke bahagian 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>

Pada ketika ini, anda akan mendapati bahawa kami hanya memperkenalkan clipoard.js Jika Papan Klip berjaya dibuat, beberapa tindakan akan diberikan kepada acara, jika tidak, ia akan mencetuskan ralat, bukan? Ini semua bagus dan berfungsi dengan semua penyemak imbas terkini kecuali IE, yang memberikan mesej seperti di bawah.

Jika anda mahu melihatnya beraksi, berikut ialah contoh JSFiddle.

Langkah seterusnya ialah merebut data papan keratan dan menampalnya secara automatik ke dalam kotak teks apabila diklik Pada ketika ini, nampaknya penyemak imbas akan menghalangnya kerana risiko keselamatan, tetapi saya akan cuba mencari atau pun membuat penyelesaian, jadi semua orang perlu terus memberi perhatian.