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

StackOverflow https://stackoverflow.com/questions/149421

  •  02-07-2019
  •  | 
  •  

Вопрос

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

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

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

автоматический размер -текстовое поле

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

Это было полезно?

Решение

Для достижения этой цели StackOverflow использует плагин jQuery: TextAreaResizer ( Текстовый редактор).

Убедиться в этом достаточно легко - просто потяните JS файлы с сайта.

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

Другие советы

Недавно мне понадобилась аналогичная функциональность.Это называется Автоматическое Выращивание и это плагин удивительного jQuery библиотека

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

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

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

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

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top