Как Stackoverflow реализует текстовое поле с изменяемым размером?
Это то, что они сделали сами, или это общедоступный компонент, который я могу легко прикрепить к текстовым полям на своих сайтах?
Я нашел этот вопрос, и он не совсем то, что мне нужно.
Это больше говорит об автоматическом изменении размера текстовых полей, тогда как мне нужна небольшая область захвата, которую вы можете перетаскивать вверх и вниз.
StackOverflow использует для этого подключаемый модуль jQuery: TextAreaResizer.
Проверить это достаточно легко - просто вытащите файлы JS с сайта.
Историческое примечание: на момент написания этого ответа WMD и TextAreaResizer были двумя отдельными плагинами, ни один из которых не был создан командой разработчиков SO (см. также: ответ Микавиттмана). Кроме того, JavaScript для сайта было довольно легко читать ... Ни одно из этих требований больше не является строго истинным, но TextAreaResizer по-прежнему работает нормально.
Мне недавно понадобился аналогичный функционал. Это называется Autogrow, и это плагин удивительного библиотека 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>
