Karena pengguna meminta untuk bergaul dengan objek Textrange, objek yang digunakan untuk memproses bagian teks dari objek JavaScript.
Textrange adalah objek yang digunakan untuk mengekspresikan karakter Cina dalam elemen HTML. Meskipun kami tidak sering menggunakan objek ini, itu disediakan di IE4.0. Namun, metode panggilan yang disediakan oleh Textrange relatif tidak jelas, jadi apa yang bisa kita lakukan dengannya?
Penggunaan tradisional Textrange adalah untuk mengoperasikan konten teks yang dipilih oleh pengguna dengan mouse di halaman web, seperti perubahan, penghapusan, penambahan baru, dll. Tetapi tujuan klasiknya adalah untuk menemukan teks (ini relatif sederhana) di halaman web dan mendapatkan posisi kursor kotak input. Yang terakhir dapat menghasilkan banyak penggunaan yang lebih berguna, seperti: membatasi input masktextbox, titik teknis intinya adalah untuk mendapatkan posisi kursor dari kotak input dan kemudian menggunakan ekspresi reguler untuk menilai konten input. Ada juga "Menggunakan tombol panah untuk menavigasi secara alami dalam matriks kotak input" yang akan saya perkenalkan nanti. Titik teknis inti juga untuk mendapatkan posisi kursor di kotak input.
Seluruh kode untuk mendapatkan posisi kursor di kotak input sebenarnya sangat pendek, tetapi objek dan metode ini tidak terlalu umum digunakan.
Kode JS
<span style = "font-size: medium;"> <script language = "javaScript"> function getCursorpsn (txb) {var slct = document.selection; var rng = slct.createrange (); txb.select (); rng.setendpoint ("startToStart", slct.createrange ()); var psn = rng.text.length; rng.collapse (false); rng.select (); mengembalikan psn; } </script> </span>Di sini kita akan berbicara tentang efek samping yang akan membawa ke operasi kotak input setelah menggunakan metode getCursorpsn ().
Untuk kotak input
Kode HTML
<span style = "font-size: medium;"> <input type = "text" onkeydown = "getCursorpsn (this)"> </span>
Itu tidak akan lagi dapat menggunakan tombol panah kiri dan kanan untuk memilih teks;
Kode HTML
<span style = "font-size: medium;"> <textarea onkeydown = "getCursorpsn (this)"> </pextarea> </span>
, Anda tidak dapat lagi menggunakan tombol shift+ up, bawah, kiri dan kanan untuk memilih teks. Karena setelah kode memperoleh titik awal dari kursor saat ini ke teks, memanggil rng.collapse (false); akan mengubah titik edit teks di keranjang teks.
1. Cuplikan kode untuk memenuhi persyaratan pengguna, gunakan tombol atas, bawah, kiri dan kanan untuk mencapai lompatan kotak teks, dan pilih konten kotak teks untuk memfasilitasi modifikasi pengguna. Kodenya adalah sebagai berikut:
Kode JS
<span style = "font-size: medium;"> var rentang = $ currenttextfield.createTextrange (); // $ currentTextField adalah jQuery objek range.movestart ('karakter', 0); range.select (); </span>Berikut ini adalah artikel impor tentang Textrange yang saya rasa cukup baik:
Kode HTML
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <adept> <title> dokumen baru </iteme> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/<style> content {font-size: 12pl; charset = UTF-8 "/<style> body {font-Size: 12pl; charset = UTF-8"/<style> body {font-Size: 12pl; } #show {latar belakang-warna: #ccff99; } </tyle> </head> <body> <textarea id = "content" cols = "30" baris = "10"> ikan di sungai mati anehnya, penduduk hilir menderita penyakit aneh, dan tanaman di sepanjang pantai terus -menerus bermutasi. Apakah mereka pestisida residual? Atau serangan biokimia? Harap perhatikan CCTV -10 "Eksplorasi Ilmiah" malam ini, program khusus yang akan datang: "The Mysterious Foot Washing Man By the River - Tim Sepak Bola Pria Cina" </pructarea> <tombol id = "btn"> Dapatkan nilai yang dipilih </tutpon> <div id = "show"> </Div> <script> string.prototype.trim = function/$/SCRIPT./SCRIPT.PRICE (SCRIPT> SCRIP.PROTOTYPE.TRIM = FUNCHER/SCRIPT/SCRIPT. ""); } /* Ada beberapa masalah di bawah metode satu ff* / function getSelectText () {coba {// ie: document.selection.createrange () w3c: window.getSelection () var selectText = (document.selection && document.selection.createrange)? document.selection.createrange (). Teks: window.getSelection (). ToString (); if (selectText! = null && selectText.trim ()! = "") {return selectText; }} catch (err) {}} /* Metode 2* / function getSelectText2 (id) {var t = document.getElementById (id); if (window.getSelection) {if (t.selectionStart! = Undefined && t.selectionEnd! = tidak terdefinisi) {return t.value.substring (t.selectionStart, t.selectionEnd); } else {return ""; }} else {return document.selection.createrange (). teks; }} document.getElementById ('btn'). onclick = function () {document.getElementById ('show'). innerHtml = getSelectText2 ('content'); } </script> </body> </html>