Saya ingin pengguna mengklik tautan, lalu memilih teks HTML di elemen lain ( bukan input).
Dengan "pilih" maksud saya dengan cara yang sama Anda akan memilih teks dengan menyeret mouse Anda ke atasnya. Ini menjadi tantangan untuk penelitian karena semua orang berbicara tentang "pilih" atau "sorot" dalam istilah lain.
Apakah ini mungkin? Kode saya sejauh ini:
HTML:
<a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a>
<code id="xhtml-code">Some Code here </code>
JS:
function SelectText(element) {
$("#" + element).select();
}
Apakah saya melewatkan sesuatu yang sangat jelas?
javascript
jquery
Jason
sumber
sumber
Jawaban:
Javascript biasa
Ini demo yang berfungsi . Bagi Anda yang mencari plugin jQuery, saya juga membuat salah satunya .
jQuery (jawaban asli)
Saya telah menemukan solusi untuk ini di utas ini . Saya dapat mengubah info yang diberikan dan mencampurnya dengan sedikit jQuery untuk membuat fungsi yang benar-benar luar biasa untuk memilih teks dalam elemen apa pun, apa pun browsernya:
sumber
browser
sniffer mereka .Ini adalah versi tanpa sniffing browser dan tidak bergantung pada jQuery:
sumber
div contentEditable='true'
?Kode Jason tidak dapat digunakan untuk elemen di dalam iframe (karena ruang lingkup berbeda dari jendela dan dokumen). Saya memperbaiki masalah itu dan saya memodifikasinya agar dapat digunakan sebagai plugin jQuery lainnya (chainable):
Contoh 1: Pemilihan semua teks di dalam tag <code> dengan satu klik dan tambahkan kelas "terpilih":
Contoh 2: Klik tombol Pada, pilih elemen di dalam Iframe:
Catatan: ingat bahwa sumber iframe harus berada di domain yang sama untuk mencegah kesalahan keamanan.
Plugin jQuery:
Saya mengujinya di IE8, Firefox, Opera, Safari, Chrome (versi saat ini). Saya tidak yakin apakah itu berfungsi di versi IE yang lebih lama (dengan tulus saya tidak peduli).
sumber
Utas ini berisi hal-hal yang sangat luar biasa. Tapi saya tidak dapat melakukannya dengan benar di halaman ini menggunakan FF 3.5b99 + FireBug karena "Kesalahan Keamanan".
Yipee !! Saya dapat memilih bilah sisi kanan dengan kode ini semoga membantu Anda:
PS: - Saya tidak dapat menggunakan objek yang dikembalikan oleh pemilih jquery seperti
sumber
Anda dapat menggunakan fungsi berikut untuk memilih konten dari elemen apa pun:
Fungsi ini dapat disebut sebagai berikut:
sumber
Saya mencari hal yang sama, solusi saya adalah ini:
sumber
focus()
pada non-input, yang merupakan pertanyaan ini.Saya menyukai jawaban lepe kecuali untuk beberapa hal:
Inilah yang saya pikirkan, dengan anggukan ke jawaban lepe untuk inspirasi. Saya yakin saya akan diejek karena ini mungkin agak berat (dan sebenarnya bisa jadi lebih tapi saya ngelantur). Tapi itu berfungsi dan menghindari peramban browser dan itu intinya .
Itu dia. Beberapa yang Anda lihat adalah untuk keterbacaan dan / atau kenyamanan. Diuji pada Mac dalam versi terbaru Opera, Safari, Chrome, Firefox dan IE. Juga diuji di IE8. Juga saya biasanya hanya mendeklarasikan variabel jika / ketika diperlukan di dalam blok kode tetapi jslint menyarankan mereka semua dinyatakan di bagian atas. Ok jslint.
Sunting Saya lupa menyertakan cara mengikat ini ke kode op:
Bersulang
sumber
setBaseAndExtent()
hanya karena ada tampaknya tidak ada gunanya bagi saya ketika Anda dapat menghapus cabang itu dan semuanya bekerja dengan baik dan dengan cara berbasis standar. Deteksi fitur bagus, tetapi saya akan lelah menguji segala sesuatu yang sangat cepat.setBaseAndExtent
adalah itu jauh lebih efisien, dan bahkan denganif
statemnent yang ditambahkan masih jauh lebih daripada jika Anda "menghapus cabang itu". Saya tidak begitu mengerti komentar "Saya lelah .."? Tulis dan lupakan, satu-satunya yang harus Anda lakukan adalah memanggil fungsi, bukan menulisnya. :)setBaseAndExtent
secara signifikan lebih banyak performan daripadaaddRange
. Kenapa bisa begitu? Komentar saya yang lain terkait dengan etos pengujian fitur Anda yang diperluas ke semua interaksi DOM: ini adalah banyak sekali kode untuk menguji setiap metode dan properti DOM tunggal sebelum menggunakannya. Saya tidak setuju; Saya hanya senang menggambar garis dan membuat beberapa asumsi dalam kode saya.Versi terbaru yang berfungsi di chrome:
http://jsfiddle.net/KcX6A/326/
sumber
Untuk setiap tag, seseorang dapat memilih semua teks di dalam tag itu dengan kode pendek dan sederhana ini. Ini akan menyorot seluruh area tag dengan warna kuning dan memilih teks di dalamnya dengan satu klik.
sumber
lepe - Itu sangat bagus untuk saya, terima kasih! Saya meletakkan kode Anda dalam file plugin, kemudian menggunakannya bersamaan dengan setiap pernyataan sehingga Anda dapat memiliki beberapa tag pra dan beberapa tautan "Pilih semua" pada satu halaman dan mengambil pra yang benar untuk disorot:
sumber
Lihat objek Seleksi (mesin Gecko) dan objek TextRange (mesin Trisula.) Saya tidak tahu tentang kerangka kerja JavaScript yang memiliki dukungan lintas-browser untuk ini diterapkan, tapi saya belum pernah mencarinya, jadi mungkin saja jQuery memilikinya.
sumber
Metode Tim berfungsi dengan baik untuk kasus saya - memilih teks dalam div untuk IE dan FF setelah saya mengganti pernyataan berikut:
dengan yang berikut ini:
Teks dalam div dipilih dengan mengkliknya dengan fungsi jQuery berikut:
sumber
di sini adalah solusi sederhana lain untuk mendapatkan teks yang dipilih dalam bentuk string, Anda dapat menggunakan string ini dengan mudah untuk menambahkan anak elemen div ke dalam kode Anda:
sumber
Kasus penggunaan khusus saya adalah memilih rentang teks di dalam elemen rentang yang dapat diedit, yang sejauh yang dapat saya lihat, tidak dijelaskan dalam salah satu jawaban di sini.
Perbedaan utama adalah bahwa Anda harus meneruskan simpul tipe
Text
keRange
objek, seperti yang dijelaskan dalam dokumentasi Range.setStart () :The
Text
node node anak pertama dari elemen span, sehingga untuk mendapatkannya, akseschildNodes[0]
dari elemen span. Sisanya sama dengan di sebagian besar jawaban lainnya.Berikut contoh kode:
Dokumentasi lain yang relevan:
Range
Selection
Document.createRange ()
Window.getSelection ()
sumber
Ditambahkan
jQuery.browser.webkit
ke "else if" untuk Chrome. Tidak dapat mengaktifkan ini di Chrome 23.Buat skrip ini di bawah ini untuk memilih konten dalam
<pre>
tag yang memilikiclass="code"
.sumber
Menurut dokumentasi jQuery dari
select()
:Ada penjelasan Anda mengapa jQuery
select()
tidak akan berfungsi dalam kasus ini.sumber