Comment dimensionner automatiquement une zone de texte verticalement à l'aide d'un prototype ?

Autodimensionnement d'une zone de texte avec un prototype

En développant la notion d'amélioration de l'expérience utilisateur en redimensionnant automatiquement une zone de texte en fonction de son contenu, approfondissons une solution détaillée à l'aide de Prototype.

Mise en œuvre verticale Redimensionnement

Pour s'adapter à différentes longueurs de ligne, le redimensionnement vertical s'avère être une option viable. En calculant le nombre de lignes occupées par le texte, nous pouvons ajuster les lignes de la zone de texte en conséquence.

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
  })

  $('iso_address').rows = linecount;
};

Écouteur d'événements pour les frappes au clavier

Pour garantir un redimensionnement rapide après chaque frappe, nous attachons un écouteur d'événement à la zone de texte :

Event.observe('iso_address', 'keydown', resizeIt );

Horizontal Considérations relatives au redimensionnement

Bien que le redimensionnement horizontal puisse sembler souhaitable, il présente des défis en raison du retour à la ligne et des longues lignes, pouvant entraîner des problèmes de mise en page. Par conséquent, le redimensionnement vertical est préféré dans la plupart des cas.

Exemple d'intégration

Dans l'exemple HTML JavaScript fourni, nous démontrons la fonctionnalité de redimensionnement automatique dans un cadre pratique, activant une zone de texte pour ajuster sa taille verticale à mesure que la saisie de texte de l'utilisateur change.

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!