Implémenter une zone de texte redimensionnable?

Question

Comment Stackoverflow applique-t-il la zone de texte redimensionnable?

S'agit-il de quelque chose qu'ils ont eux-mêmes lancé ou s'agit-il d'un composant accessible au public que je peux facilement joindre à textareas sur mes sites?

J'ai trouvé cette question et ça ne fait pas tout à fait ce que je veux.

autosizing-textarea

Cela en dit plus sur le redimensionnement automatique des zones de texte alors que je veux la petite zone de saisie que vous pouvez faire glisser de haut en bas.

Answer 1

StackOverflow utilise un plugin jQuery pour ce faire: TextAreaResizer .

C’est assez facile de le vérifier - il suffit d’extraire les fichiers JS du site.

Note historique: lorsque cette réponse a été écrite à l'origine, WMD et TextAreaResizer étaient deux plug-ins distincts, dont l'un n'a pas été créé par l'équipe de développement SO (voir aussi: micahwittman's answer ). En outre, le code JavaScript du site était assez facile à lire ... Aucun de ceux-ci n'est strictement , mais TextAreaResizer fonctionne toujours très bien.

Answer 2

J'avais besoin d'une fonctionnalité similaire récemment. Il s’appelle Lancement automatique et constitue un plugin de l'incroyable bibliothèque jQuery

Answer 3

Au début, j’imaginais que c’était une fonctionnalité intégrée de l’ éditeur de Wysiwym Markdown , mais Shog9 est correct: ce n’est pas du tout cuit, mais c’est une gracieuseté du plugin jQuery TextAreaResizer (j’ai été égaré par le navigateur qui me demandait de vérifier démo de l'éditeur , car Google Chrome lui-même ajoute la fonctionnalité évolutive sur textareas & # 8212; un peu comme le fait le navigateur Safari).

Answer 4

Utilisation d’AngularJS:

angular.module('app').directive('textarea', function() {
  return {
    restrict: 'E',
    controller: function($scope, $element) {
      $element.css('overflow-y','hidden');
      $element.css('resize','none');
      resetHeight();
      adjustHeight();

      function resetHeight() {
        $element.css('height', 0 + 'px');
      }

      function adjustHeight() {
        var height = angular.element($element)[0]
          .scrollHeight + 1;
        $element.css('height', height + 'px');
        $element.css('max-height', height + 'px');
      }

      function keyPress(event) {
        // this handles backspace and delete
        if (_.contains([8, 46], event.keyCode)) {
          resetHeight();
        }
        adjustHeight();
      }

      $element.bind('keyup change blur', keyPress);

    }
  };
});

Ceci transformera toutes vos zones de texte en croissance / diminution. Si vous souhaitez que seulement certaines zones de texte augmentent / réduisent, modifiez la partie supérieure de la manière suivante:

angular.module('app').directive('expandingTextarea', function() {
  return {
    restrict: 'A',

J'espère que ça aide!

Answer 5

Qu'en est-il de son travail

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>