Baru -baru ini, kita perlu memberikan HTML5 WebApp untuk mengimplementasikan fungsi salin pada halaman: Pengguna dapat memilih teks dan memunculkan menu Salin Sistem di Teks Tekan Panjang, dan pengguna dapat mengklik untuk menyalin operasi salin, dan kemudian tempel ke AppStore Search untuk aplikasi yang sesuai. Alasan mengapa itu tidak digunakan untuk langsung melompat ke aplikasi yang sesuai dalam bentuk tautan adalah untuk meningkatkan bobot aplikasi perusahaan yang dipromosikan melalui pencarian kata kunci input aktif pengguna. Jadi fungsi salinan ini sangat penting untuk pengalaman pengguna.
Mencoba beberapa praktik, kompatibilitas pada platform Android/IOS tidak terlalu bagus. Di browser WeChat, mudah untuk mencapai teks yang panjang untuk merangsang menu sistem. Tetapi kinerja browser lain tidak konsisten. Termasuk input fokus simulasi, pemilihan JavaScript, cobalah untuk mengaktifkan menu sistem dengan tag. Metode ini memiliki cacat yang kompatibel.
1) Meskipun tag dengan atribut HREF digunakan pada browser UC dan browser Baidu, tekan panjang teks akan muncul salinan gratis/pilih menu teks. Beberapa ponsel Android, di beberapa ponsel Android, browser sistem dan iPhone dianggap sebagai tautan murni, hanya tautan salin yang muncul, tanpa menyalin menu teks. Selain itu, bahkan jika hanya sejumlah kecil browser yang dianggap layak, ini akan memiliki langkah lebih untuk mengoperasikan pengguna, meningkatkan kompleksitas. Jadi rencana ini tidak diinginkan.
2) Dengan bantuan pemilihan dan metode jangkauan, kompatibilitas browser yang berbeda perlu dipertimbangkan.
Function SELECTTEXT (elemen) {var doc = document, text = docgeteLementById (elemen), range, selection if (docbodycreatextrange) {range = documentbod ycreateTextrange (); seleksi = WindowGetSelection (); } else {alert (none);}}Sayangnya, semua teks tidak dapat dipilih dengan mengklik atau lama menekan -tinggi pada safari iPhone (karena juga mendukung window.getSelection, mengapa teks tidak dapat dipilih secara default setelah operasi addrange browser safari, silakan tinggalkan pesan untuk alasan tersebut ). Oleh karena itu, ada cacat dalam metode ini. Pilih secara aktif metode area teks Cina dan lampirkan nanti.
3) Pengguna iPhone mungkin tahu bahwa lama menekan area kosong di sekitar teks dalam konstituensi teks tertentu, Safari akan secara otomatis memilih teks di konstituensi (teks target perlu ditempatkan dalam wadah blok div independen). Berdasarkan fitur ini, gunakan margin CSS untuk memodifikasinya. Setelah pengujian, terlepas dari platform Android dan iOS, browser sistem yang dilengkapi dengan ponsel kompatibel. Adapun produk seluler dari produsen lain seperti UC Browser dan Baidu Browser, karena ada mekanisme yang berbeda, mereka hanya dapat menggunakan fungsi replikasi gratis yang disediakan oleh menu browser ini.
Oleh karena itu, saya menggabungkan cara kedua dan ketiga, menggunakan acara Taphold di JQuery Mobile untuk mensimulasikan salinan sistem ponsel untuk operasi Longtap. Mari kita sebutkan bahwa bug Taphold yang kompatibel tidak akan dilampirkan pada solusi secara detail di sini.
Inilah solusi saya. Kode spesifiknya adalah sebagai berikut:
Kode HTML:
<Div class = ParA Persyaratan> <Div class = Tips Tips-T> 1. Anda harus mendownloadnya untuk pertama kalinya sebelum berlaku <br/> 2. Tidak dapat mengunduhnya dari peringkat </Div> <Div class = cparea> <div class = kwd id = kwd> <span> master dari tiga kerajaan yanyi optimisasi ponsel </span> </div> </div> <div class = cparea> <span class = kdes> < b> ★ </b> Tekan lama tekan bingkai putus-putus, salin kata kunci </span> </div> <a href = https: // itunesappleCom/cn/data-role = class tombol = unduh> Pergi ke appstore untuk mencari dan Unduh </a> </div>
Kode JavaScript:
<Type skrip = text/javascript> $ (#kwd) bind (taphold, function () {// tidak mendukung iPhone/itouch/iPad safari var doc = dokumen, text = docgeteLementById (kwd), rentang, seleksi; if (if ( DocbodyCreateTextrange) {range = DocumentBodyCreateTextrange (); );} Else {alert (browser tidak mendukung fungsi replikasi tekan panjang);}});Kode CSS kunci:
CPAREA {Text-Align: Center; 1875em; #212121;Catatan: Margin di sini: 2em adalah untuk mencapai fungsi panjang dari penekanan panjang browser Safari. 2em ini. Pada akhirnya, tidak hanya konsisten secara visual dengan gambar desain, tetapi juga mencapai menu sistem stimulasi yang panjang.
Akhirnya, tambahkan cara lengkap untuk mendukung Safari:
$ (#kwd) .bind (taphold, function () {var doc = documen, text = docgeteLementById (kwd), range, selection; if (docBodyCreatexrange) {// range = rangeSelectExtrange (); rangeMoVetoelementText (teks); rangeSelect );} Lain jika WindowGetSelection) {// ff ch sf seleksi = windowgetselection () ; 9-do tidak Dukungan TextContent MakeLection (0, TextFirstChildTextContentLength, 0, TextFirstChild); }}); Sel = windowgetselection ();Di atas adalah semua isi artikel ini.