Input Box Flashback kotak teks yang disebut berarti bahwa fokus kotak input selalu di awal. Seperti yang ditunjukkan pada gambar, ketika saya memasukkan 123456789, 987654321 ditampilkan pada kotak input.
Mengapa Anda ingin membuat demo ini? Itu karena saya menemuinya dalam suatu proyek. Persyaratan proyek adalah dua kotak input, satu input dalam urutan positif dan yang lainnya adalah input dalam kilas balik. Di bawah ini saya akan menuliskan ide dan kode implementasi.
Input Flashback Teks:
Selama kami memastikan bahwa fokus kotak input selalu ada di tempat pertama, kami dapat mencapainya setiap kali kami memasukkannya, yaitu, kekambuhan.
Kode:
fungsi setPosisi (ctrl, pos) {// atur fungsi posisi kursor if (ctrl.setselectionRange) {ctrl.focus (); ctrl.setselectionRange (pos, pos);} else if (ctrl.createTextrange) {var rentang = ctrl.creatextrange (); // Buat rentang area seleksi. Collapse (true); // Pindahkan kursor ke posisi awal rentang area seleksi. Moveend ('karakter', pos); // Ubah posisi di mana area pemilihan ujung rentang.movestart ('karakter', pos); // ubah posisi di mana area pemilihan dimulai range.select (); // Sinkronisasi Konten yang Dipilih ke Objek Saat Ini}}Selama kami mengatur POS PARAMETER ke 0, itu akan baik -baik saja.
Di bawah ini adalah demo lengkap, yang mengimplementasikan penghapusan normal dan input kilas balik.
<! Doctype html> <html> <head> <itement> </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <tyle> .content {width: 300px; margin: 0 auto; margin-top: 50px;} {} {{none-st. 200px;} </style> <skrip src = "http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"> </script> </head> <body> <v style = "> <ul> <Li> <input type =" LiP "> </LiPput ="> TEKP "> </LiPPUT" <Li- "> </LiPPUT"> </lipput "> </li-"> type = "text"> </li> </ul> </div> <script> function setPosition (ctrl, pos) {// atur fungsi posisi kursor jika (ctrl.setselectionRange) {ctrl.focus (); ctrangexelectionRange (pos, pos, pos);} lain if (ctrl.ctrangeEx (CRREXETET (pos, pos, pos, pos);} lain if (ctrl.ctraxexeREx (poss);} lain if (ctrl.ctrang (ctrl.ctrange (craxexex (pos); // Buat rentang area seleksi. Collapse (true); // Pindahkan kursor ke posisi awal rentang area seleksi. Moveend ('karakter', pos); // Ubah posisi akhir dari rentang area pemilihan.movestart ('karakter', pos); // Ubah posisi awal rentang area pemilihan. Select (); // Sinkronkan konten yang dipilih ke objek saat ini}} $ ('. Elem'). On ('keypress keyup', function () {if (event.keycode === 8) return; setPosisi (this, 0);}); </script> </body> </html>Selain itu, Anda dapat menggunakan fungsi yang relevan untuk mendapatkan posisi fokus.
function getPosition (ctrl) {// yaitu supportvar caretpos = 0; if (document.selection) {ctrl.focus (); var sel = document.selection.createrange (); sel.moveStart ('karakter', -ctrl.value.length); caretpos = sel.text.length;} // firefox Supportelse if (ctrl.selectionstart || ctrl.selectionStart; return (caretpos);}Meringkaskan:
Dengan mengatur dan mendapatkan fokus input teks, kita dapat melakukan beberapa efek khusus lainnya, seperti menghapus seluruh kata atau variabel, dll.
Jika Anda memiliki ide bagus tentang artikel ini, Anda dapat @me, saya harap artikel ini dapat membantu Anda!