Как Stackoverflow реализует изменчивую текстовую область?
Это что-то, что они катались самостоятельно или это общедоступный компонент, который я могу легко прикрепить к текстовым полям на своих сайтах?
Я нашел этот вопрос, и он не совсем делает то, что я хочу.
Это больше говорит о автоматическом изменении размера текстовых полей, тогда как я хочу немного захватить область, которую вы можете перетащить вверх и вниз.
StackOverflow использует плагин jQuery для выполнения этого: TextAreaResizer.
Достаточно легко проверить это - просто вытащите файлы JS с сайта.
Историческая заметка:, когда этот ответ был изначально написан, WMD и TextAreaResizer были двумя отдельными плагинами, ни одна из которых не была создана командой SO Dev (см. также: micahwittman answer). Кроме того, JavaScript для сайта был довольно прост для чтения... Ни один из них не является строго истинным, но TextAreaResizer все еще работает отлично.
Мне нужна была аналогичная функциональность в последнее время. Его называют Autogrow, и это плагин удивительного jQuery
Сначала я считал, что это встроенная функция Wysiwym Markdown editor, но Shog9 верна: она не запекается вообще-то, но любезно предоставлен плагин jQuery TextAreaResizer (я был сбит с пути браузером, чтобы проверить демонстрацию , поскольку Google Chrome сам добавляет расширяемую функциональность в textareas &mdash, как это делает браузер 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',
Надеюсь, что это поможет!