Bagaimana untuk Menguatkuasakan Panjang Teks Maksimum secara Dinamik dalam Kawasan Teks Menggunakan JavaScript?

Panduan Komprehensif untuk Mengenakan Panjang Maks pada Kawasan Teks dalam HTML Menggunakan JavaScript

Dalam pembangunan web, selalunya perlu mengawal panjang maksimum teks yang dimasukkan ke dalam teks kawasan. Senario ini memerlukan anda untuk menguatkuasakan atribut panjang maksimum secara automatik pada berbilang kawasan teks. Walaupun penyelesaian sebelumnya melibatkan pengendalian peristiwa manual untuk setiap kawasan teks, kami akan meneroka pendekatan alternatif yang menghapuskan keperluan untuk kod berulang.

Penyelesaian:

Kunci kepada penyelesaian ini terletak pada keupayaan JavaScript untuk mengimbas halaman untuk semua kawasan teks dan menambah pendengar acara secara dinamik kepada yang sesuai. Dengan memanfaatkan acara onload, kami mendapat akses kepada keseluruhan kandungan halaman semasa memuatkan, termasuk mana-mana kawasan teks.

window.onload = function() {

Kini, kami boleh melintasi dokumen, mencari semua elemen dengan teg TEXTAREA:

var txts = document.getElementsByTagName('TEXTAREA');

Seterusnya, kami mengulangi setiap kawasan teks untuk menyemak sama ada ia mempunyai atribut panjang maksimum yang sah. Ambil perhatian bahawa kami menggunakan ungkapan biasa untuk memastikan bahawa nilai panjang maksimum ialah nombor.

for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {

Untuk setiap kawasan teks yang layak, kami mentakrifkan fungsi panggil balik untuk mengesahkan panjang maksimum. Fungsi ini akan:

1. Mendapatkan semula nilai atribut panjang maksimum sebagai integer
2. Semak sama ada panjang semasa nilai kawasan teks melebihi panjang maksimum
3. Jika melebihi , paparkan mesej makluman dan potong nilai kepada panjang maksimum yang dibenarkan

var func = function() {
    var len = parseInt(this.getAttribute("maxlength"), 10);

    if(this.value.length > len) {
        alert('Maximum length exceeded: ' + len);
        this.value = this.value.substr(0, len);
        return false;
    }
}

Akhir sekali, kami melampirkan fungsi panggil balik ini pada kedua-dua acara kekunci dan kabur kawasan teks.

txts[i].onkeyup = func;
txts[i].onblur = func;

Pendekatan komprehensif ini menyediakan penyelesaian yang lancar untuk mengenakan panjang maksimum secara automatik pada semua kawasan teks yang layak pada halaman web tanpa memerlukan pengendalian acara berulang.

Atas ialah kandungan terperinci Bagaimana untuk Menguatkuasakan Panjang Teks Maksimum secara Dinamik dalam Kawasan Teks Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!