Реализация текстового поля с изменяемым размером?
Вопрос
Как 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>