Внедрение изменчивой текстовой области?

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

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

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

autosizing-textarea

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

Ответы

Ответ 1

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

Достаточно легко проверить это - просто вытащите файлы JS с сайта.

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

Ответ 2

Мне нужна была аналогичная функциональность в последнее время. Его называют Autogrow, и это плагин удивительного jQuery

Ответ 3

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

Ответ 4

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

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