Bagaimana untuk Melaksanakan Sekatan Panjang Maksimum secara Dinamik pada TextAreas?

Mengenakan Panjang Maksimum secara Dinamik pada TextAreas

Menguatkuasakan had aksara pada kawasan teks adalah penting untuk memastikan integriti data dan mencegah ralat input pengguna. Walaupun HTML menawarkan atribut 'maxlength' untuk medan input, ia tidak disokong secara langsung untuk kawasan teks.

Penyelesaian yang mudah ialah menggunakan pengendali acara seperti 'onKeyPress' dan 'onKeyUp' untuk memantau dan menyekat input pengguna. Walau bagaimanapun, pendekatan ini memerlukan pelaksanaan manual untuk setiap kawasan teks.

Berikut ialah penyelesaian JavaScript yang elegan yang mengautomasikan proses ini dan secara dinamik mengenakan 'panjang maksimum' pada mana-mana kawasan teks:

<code class="javascript">window.onload = function() {
  var txts = document.getElementsByTagName('TEXTAREA');

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

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    }
  };
}</code>

Bagaimana ia Berfungsi:

• Skrip bermula dengan mendapatkan semua kawasan teks pada halaman menggunakan 'getElementsByTagName'.
• Ia berulang melalui setiap kawasan teks dan menyemak sama ada ia mempunyai atribut 'maxlength' dengan nilai berangka.
• Jika syarat ini dipenuhi, ia memberikan fungsi kepada pengendali acara 'onkeyup' dan 'onblur' bagi kawasan teks.
• Fungsi mendapatkan semula atribut 'maxlength' dan membandingkannya dengan panjang teks semasa.
• Jika panjang teks melebihi maksimum, mesej amaran dipaparkan, teks dipotong dan peristiwa itu dihalang.

Dengan menggunakan skrip ini, pembangun boleh dengan mudah menguatkuasakan 'panjang maksimum' pada mana-mana kawasan teks pada halaman web mereka tanpa memerlukan pengendalian acara manual.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Sekatan Panjang Maksimum secara Dinamik pada TextAreas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!