Bagaimana untuk Mencipta TextArea Mengubah Saiz Sendiri Yang Mengecut pada Pemadaman Kandungan?

Mencipta TextArea dengan Auto-Ubah Saiz yang Mengecil

Cabaran: Percubaan sebelumnya untuk mencipta kawasan teks dengan auto- ubah saiz gagal mengecilkan kawasan teks apabila kandungan pemadaman.

Penyelesaian:

Kod yang disediakan daripada urutan asal melaraskan ketinggian kawasan teks berdasarkan kandungannya. Walau bagaimanapun, ia tidak mengambil kira pemadaman kandungan, mengakibatkan nilai clientHeight yang salah.

Untuk mengatasi had ini, penyelesaian yang lebih komprehensif diperlukan:

function FitToContentWithShrink(id, maxHeight) {
  var text = id && id.style ? id : document.getElementById(id);
  if (!text) return;

  var newHeight = text.scrollHeight;
  var currentHeight = text.clientHeight;

  // Check if the content has changed
  if (newHeight !== currentHeight) {
    if (newHeight > currentHeight) {
      // If the new height is greater than the current height, expand
      text.style.height = newHeight + "px";
    } else if (newHeight < currentHeight) {
      // If the new height is less than the current height, shrink
      text.style.height = newHeight + "px";
    }
  }
}

Faedah:

• Mengecutkan kandungan: Penyelesaian ini mengira ketinggian baharu dengan betul berdasarkan perubahan kandungan, termasuk pemadaman.
• Dipercayai merentas penyemak imbas: Menyokong Firefox, Chrome, IE, Edge, IOS Safari dan Penyemak Imbas Android.
• Berfungsi dengan teks pramuat: Mengendalikan pra-isi textareas.
• Versatile: Boleh digunakan pada semua textareas di tapak web.

Penggunaan:

window.onload = function () {
  document.getElementById("ta").onkeyup = function () {
    FitToContentWithShrink(this, 500);
  };
};

Nota Tambahan:

Memohon JavaScript dalam mod ketat tidak akan menjejaskan kefungsian penyelesaian ini.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta TextArea Mengubah Saiz Sendiri Yang Mengecut pada Pemadaman Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!