Comment Prototype.js peut-il redimensionner automatiquement les zones de texte ?

Dimensionnement automatique des zones de texte avec prototype

Lors de la conception d'interfaces utilisateur, il est souvent souhaité que les zones de texte soient automatiquement redimensionnées pour s'adapter à différentes quantités de texte. Prototype, un framework JavaScript, fournit une solution simple pour obtenir cet effet.

Redimensionnement vertical

Le redimensionnement vertical est une approche pratique qui permet à la zone de texte de s'étendre ou de se contracter verticalement. en fonction du nombre de lignes de texte. Pour implémenter cela à l'aide de Prototype, le code suivant peut être utilisé :

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

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

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

Dans ce code, la fonction resizeIt est définie. Il compte le nombre de lignes dans la zone de texte en divisant le texte en caractères de nouvelle ligne et en en ajoutant un pour chaque ligne, en tenant compte du retour à la ligne potentiel. La fonction définit ensuite l'attribut rows de la zone de texte sur le nombre de lignes calculé.

Activation de la fonction

Pour activer le comportement de redimensionnement, la fonction resizeIt peut être liée à un événement, tel qu'un keyup ou un keydown, de la manière suivante :

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

Exemple Utilisation

L'exemple suivant montre comment utiliser la fonction de dimensionnement automatique sur une zone de texte :

<textarea></textarea>

Ce code crée une zone de texte avec une ligne et 50 colonnes, et la redimensionne automatiquement pour adapter le texte tel qu'il est saisi.

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!