Comment créer une zone de texte auto-redimensionnante qui rétrécit lors de la suppression de contenu ?

Création d'une zone de texte avec redimensionnement automatique qui rétrécit

Défi : Tentatives précédentes de création d'une zone de texte avec redimensionnement automatique le redimensionnement n'a pas réussi à réduire la zone de texte lors du contenu suppression.

Solution :

Le code fourni par le fil de discussion d'origine ajuste la hauteur de la zone de texte en fonction de son contenu. Cependant, il ne prend pas en compte la suppression de contenu, ce qui entraîne une valeur clientHeight incorrecte.

Pour surmonter cette limitation, une solution plus complète est nécessaire :

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";
    }
  }
}

Avantages :

• Rétrécit le contenu : Cette solution calcule correctement la nouvelle hauteur en fonction de modifications du contenu, y compris la suppression.
• Fiable sur tous les navigateurs : Prend en charge Firefox, Chrome, IE, Edge, IOS Safari et le navigateur Android.
• Fonctionne avec pré -texte chargé : Poignées pré-remplies zones de texte.
• Polyvalent :Peut être appliqué à toutes les zones de texte d'un site Web.

Utilisation :

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

Remarque supplémentaire :

Application de JavaScript en mode strict n'affectera pas la fonctionnalité de cette solution.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!