Bagaimana untuk Menguatkuasakan Had Aksara pada TextAreas dalam HTML tanpa Pengendali Acara?

Menguatkuasakan Had Aksara TextArea dalam HTML dengan JavaScript

Memperluas kefungsian yang disediakan oleh atribut panjang maksimum HTML, JavaScript menawarkan penyelesaian serba boleh untuk secara automatik mengenakan had aksara pada kawasan teks. Dengan menghapuskan keperluan untuk pengendalian acara manual, pendekatan ini menyediakan cara yang diperkemas dan cekap untuk menguatkuasakan sekatan input.

Mengenakan Panjang Maksimum tanpa Pengendali Acara

Pendekatan konvensional untuk mengehadkan aksara textarea melibatkan penggunaan pengendali acara seperti onkeypress atau onkeyup. Walau bagaimanapun, ini menjadi membosankan apabila perlu menentukan had untuk berbilang kawasan teks.

JavaScript membenarkan penyelesaian yang lebih elegan yang memintas pengendalian acara eksplisit:

<code class="javascript">window.onload = function() {
  // Retrieve all text areas on the page
  var txts = document.getElementsByTagName('TEXTAREA');

  // Loop through each text area
  for(var i = 0, l = txts.length; i < l; i++) {
    // If the textarea has a valid maxlength attribute (numeric value)
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {
      // Define a function to handle maxlength enforcement
      var func = function() {
        var len = parseInt(this.getAttribute("maxlength"), 10);

        // Check if the input length exceeds the limit
        if(this.value.length > len) {
          // Alert the user and truncate the input
          alert('Maximum length exceeded: ' + len);
          this.value = this.value.substr(0, len);
          return false;
        }
      }

      // Assign the function to the onkeyup and onblur events
      txts[i].onkeyup = func;
      txts[i].onblur = func;
    }
  };
};</code>

Butiran Pelaksanaan

• window.onload: Laksanakan skrip setelah halaman dimuatkan.
• getElementsByTagName: Dapatkan semula semua elemen kawasan teks pada halaman.
• Ujian regex: Semak sama ada atribut panjang maksimum ialah nilai angka yang sah.
• fungsi: Mentakrifkan fungsi yang menyemak sama ada input panjang melebihi panjang maksimum dan memotong input jika perlu.
• Pengendalian acara: Menetapkan fungsi fungsi kepada peristiwa onkeyup dan onblur untuk setiap kawasan teks dengan atribut panjang maksimum yang sah.

Faedah

• Penguatkuasaan automatik: Had aksara dikenakan secara automatik tanpa memerlukan pengendalian acara manual untuk setiap kawasan teks.
• Kemudahan pelaksanaan: Skrip yang disediakan memudahkan proses penguatkuasaan panjang maksimum merentas berbilang kawasan teks.
• Pendekatan modular: Logik penguatkuasaan panjang maksimum adalah serba lengkap dalam berfungsi, menjadikannya mudah untuk digunakan semula atau disesuaikan.

Atas ialah kandungan terperinci Bagaimana untuk Menguatkuasakan Had Aksara pada TextAreas dalam HTML tanpa Pengendali Acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!