Rumah hujung hadapan web Soal Jawab bahagian hadapan Bagaimana untuk mengehadkan bilangan aksara dalam jquery

Bagaimana untuk mengehadkan bilangan aksara dalam jquery

May 28, 2023 pm 12:07 PM

Dengan perkembangan pesat Internet, semakin banyak laman web dan aplikasi melibatkan watak atau had perkataan. Contohnya, platform e-dagang perlu mengehadkan panjang nama pengguna; platform Weibo perlu mengehadkan bilangan aksara dalam siaran Weibo; Sebagai tindak balas kepada keperluan ini, JQuery menyediakan beberapa kaedah mudah untuk mengehadkan bilangan aksara atau perkataan dalam kotak input atau kotak teks Artikel ini akan memperkenalkan beberapa kaedah yang biasa digunakan.

  1. Kira bilangan aksara atau perkataan dalam kotak input atau kotak teks

Kita boleh menggunakan fungsi val() JQuery untuk mendapatkan nilai dalam kotak input atau teks kotak, dan kemudian gunakan Sifat panjang mendapat panjangnya untuk mengira bilangan aksara atau perkataan. Contohnya adalah seperti berikut:

$("#input").on("input",function(){
    var text = $(this).val();
    var num = text.length;
    $("#count").text(num);
});
Salin selepas log masuk

Dalam kod ini, kami menggunakan peristiwa input Apabila pengguna memasukkan mana-mana aksara dalam kotak input, peristiwa itu dicetuskan Kemudian kami mendapat nilai kotak input dan digunakan atribut panjang untuk mendapatkan watak, dan akhirnya memaparkan bilangan aksara pada halaman.

  1. Hadkan bilangan aksara atau perkataan dalam kotak input atau kotak teks

Selain mengira bilangan aksara atau perkataan, kita juga boleh mengehadkan bilangan aksara atau perkataan dalam kotak input atau kotak teks. Kita boleh menggunakan fungsi val() JQuery untuk memintas sebahagian daripada rentetan untuk mencapai fungsi ini. Contohnya adalah seperti berikut:

$("#input").on("input",function(){
    var text = $(this).val();
    var limit = 10;//定义限制字符数
    if(text.length > limit){//超过限制字符数
        $(this).val(text.substr(0,limit));//截取固定长度的字符串
    }
});
Salin selepas log masuk

Dalam kod ini, kami mentakrifkan had pembolehubah untuk menentukan bilangan had aksara, dan kemudian menentukan sama ada bilangan aksara melebihi bilangan had aksara dalam acara input ia melebihi, gunakan fungsi substr() Potong rentetan panjang tetap untuk mengehadkan bilangan aksara atau perkataan dalam kotak input atau kotak teks.

  1. Paparkan baki aksara atau bilangan perkataan

Kadangkala, pengguna perlu tahu berapa banyak aksara atau perkataan yang boleh mereka masukkan, kita boleh menggunakan JQuery untuk memaparkan aksara yang tinggal Atau bilangan perkataan. Contohnya adalah seperti berikut:

var limit = 10;
$("#input").on("input",function(){
    var text = $(this).val();
    var count = limit - text.length;
    if(count >= 0){
        $("#message").text("您还可以输入 " + count + " 个字符");
    }else{
        $("#message").text("您已超出限制 " + Math.abs(count) + " 个字符");
    }
});
Salin selepas log masuk

Dalam kod ini, kami mentakrifkan had pembolehubah untuk menentukan bilangan had aksara, dan kemudian dalam acara input, kami mendapat nilai dalam kotak input atau kotak teks dan mengira apa lagi yang boleh dimasukkan Berapa banyak aksara yang ada dengan sewajarnya berdasarkan hasil pengiraan.

Selain daripada tiga kaedah di atas, terdapat kaedah lain untuk mengehadkan bilangan aksara atau perkataan, seperti menggunakan atribut panjang maksimum HTML5, menggunakan pemalam, dsb. Ringkasnya, JQuery menyediakan banyak kaedah mudah untuk mengehadkan bilangan aksara atau perkataan dalam kotak input atau kotak teks Anda boleh memilih kaedah yang sesuai mengikut keperluan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk mengehadkan bilangan aksara dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Mar 19, 2025 pm 03:58 PM

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?

Terangkan konsep pemuatan malas. Terangkan konsep pemuatan malas. Mar 13, 2025 pm 07:47 PM

Terangkan konsep pemuatan malas.

Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya? Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya? Mar 18, 2025 pm 01:45 PM

Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya?

Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Mar 18, 2025 pm 01:44 PM

Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula?

Bagaimanakah algoritma Rekonsiliasi React berfungsi? Bagaimanakah algoritma Rekonsiliasi React berfungsi? Mar 18, 2025 pm 01:58 PM

Bagaimanakah algoritma Rekonsiliasi React berfungsi?

Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen? Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen? Mar 19, 2025 pm 03:59 PM

Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen?

Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara? Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara? Mar 19, 2025 pm 04:10 PM

Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara?

Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal? Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal? Mar 19, 2025 pm 04:16 PM

Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal?

See all articles