Реализация изменяемого размера текстовой области?

Question

Как в Stackoverflow реализована текстовая область с изменяемыми размерами?

Это то, что они сами катали, или это общедоступный компонент, который я могу легко прикрепить к текстовым областям на своих сайтах?

Я нашел этот вопрос, и он не совсем делает то, что я хочу.

Autosizing-TextArea

Это больше говорит об автоматическом изменении размера текстовых областей, тогда как я хочу маленькую область захвата, которую вы можете перетаскивать вверх и вниз.

Answer 1

StackOverflow использует плагин jQuery для этого: TextAreaResizer .

Это достаточно легко проверить - просто извлеките файлы JS с сайта.

Историческая справка: , когда этот ответ был первоначально написан, WMD и TextAreaResizer были двумя отдельными плагинами, ни один из которых не был создан командой разработчиков SO (см. Также: ответ micahwittman ). Кроме того, JavaScript для сайта был довольно легко читаемым ... Ни один из них строго больше не верен, но TextAreaResizer по-прежнему работает просто отлично.

Answer 2

Мне недавно понадобился аналогичный функционал. Он называется Autogrow и является плагином удивительной jQuery библиотеки

Answer 3

Сначала я полагал, что это встроенная функция редактора Wysiwym Markdown , но Shog9 верен: он вообще не запечен, но любезно предоставлен плагином jQuery TextAreaResizer (я был Введенный в заблуждение браузер использовал для проверки демонстрации редактор , потому что сам Google Chrome добавляет расширяемые функциональные возможности в текстовые области - так же, как браузер Safari).

Answer 4

как насчет его работы

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

Answer 5

Использование 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);

    }
  };
});

Это превратит все ваши текстовые области в растущие / уменьшающиеся. Если вы хотите, чтобы только определенные текстовые области увеличивались / уменьшались - измените верхнюю часть следующим образом:

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

Надеюсь, это поможет!