Metode untuk mendapatkan jumlah kata yang tersisa dinamis di TextArea berdasarkan JS

PENDAHULUAN KASUS: Kami sering melihat beberapa situs web dengan kotak teks TextArea. Saat Anda masuk, ada permintaan teks di bawah berapa banyak kata yang bisa Anda masukkan. Hari ini untuk mengimplementasikan fungsi ini. Tentu saja, karena satu halaman memiliki beberapa Textarea, tidak mungkin menggunakan logika JS tunggal untuk kontrol, sehingga harus dienkapsulasi dengan cara yang kecil. Tentu saja, kemasan saya masih memiliki beberapa kekurangan, tetapi fungsi dasar diimplementasikan.

Pertama, perkenalkan satu kasus implementasi TextArea

Bagian html:

 <textarea id = "text_txt1"> </textarea> <span id = "num_txt1"> 600 kata yang tersisa dapat dimasukkan </span>

Bagian JS:

 $ (function () {$ ('#text_txt1'). on ('keyup', function () {var txtval = $ ('#text_txt1'). Val (). Panjang; console.log (txtval); var str = parseInt (600-txtval); console.log (str); ) {$ ('#num_txt1'). html ('tersisa dapat masuk'+str+'word');} else {$ ('#num_txt1'). html ('tersisa dapat memasukkan 0 kata'); $ ('#text_txt1). Val00) ($ ($ ('#text_txt1). Daripada atau sama dengan 0, jumlah kata tidak dapat ditingkatkan, hanya bisa 600 kata} // console.log ($ ('#num_txt'). html (str));});}))

Kemudian perkenalkan beberapa kasus implementasi TextArea di bawah halaman yang sama

 function changeLength (obj, num) {obj.on ('keyup', function () {var txtval = obj.val (). length; // console.log (txtval); var str = parseInt (600-txtval); // console.log (str); if (str> 0) {ever-num {num.html ('input yang tersisa 0 kata'); obj.val (obj.val (). Substring (0, 600));} // console.log ($ ('#num_txt'). html (str));});} $ (function () {// I memiliki empat di sini, changelength ($ ('#text_txt1'), $ ('#num_txt1')); changeLength ($ ('#text_txt2'), $ ('#num_txt2')); c hangelength ($ ('#text_txt3'), $ ('#num_txt3')); changeLength ($ ('#text_txt4'), $ ('#num_txt4'));});

Tentu saja, jumlah kata yang diperlukan di sini juga dapat dienkapsulasi di dalam fungsi, tetapi saya tidak akan merangkumnya. Ini menyadari bahwa ketika memasukkan teks, kata -kata yang tersisa akan ditampilkan secara otomatis di dalam rentang. Ketika nilai input mencapai nilai tertinggi, kata -kata yang tersisa akan ditampilkan sebagai 0, dan konten tidak dapat diisi dalam konten baru. Saat menghapus teks, rentang dapat secara dinamis mendapatkan jumlah kata yang tersisa.

Di bawah ini adalah kode orang lain, dan kali ini saya juga telah meminjam beberapa metode penulisan orang lain

html:

 <div> <p> Pendahuluan: </p> <textarea id = "content" name = "tanda" style = "tinggi: 60px; overflow-y: tersembunyi;" onceyup = "changelength (this, 60)"> </pextarea> <div> <h3> 60 </h3> </div> </div>

JS:

 // Pastikan panjang fungsi tekstara changelength (obj, lg) {var len = $ (obj) .val (); $ (obj) .next (). find ("h3"). text (lg-len.length); if (len.length> = lg) {$ (obj) .next (). find ("h3"). text (0); $ (Obj). Val (len.substring

Di atas adalah metode untuk mendapatkan kata -kata yang tersisa dinamis di TextArea berdasarkan JS yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!