A implementação de um textarea redimensionável?
Pergunta
Como o Stackoverflow implementar o textarea redimensionável?
Isso é algo que eles mesmos rolou ou é um componente disponível publicamente que eu posso facilmente anexar a textareas em meus sites?
Eu encontrei esta questão e que não chega a fazer o que eu quiser.
que fala redimensionamento mais sobre automaticamente textareas enquanto eu quero a garra-área pouco que você pode arrastar para cima e para baixo.
Solução
StackOverflow usa um plugin jQuery para fazer isso:. TextAreaResizer
É bastante fácil de verificar isso -. Basta puxar arquivos do JS do site
Nota histórica: quando esta resposta foi originalmente escrito, ADM e TextAreaResizer dois plugins separados, nenhum de que foi de autoria do Dev Team SO (ver também: micahwittman's). Além disso, o JavaScript para o local foi bastante fácil de ler ... Nenhum destes são estritamente true mais, mas TextAreaResizer ainda funciona muito bem.
Outras dicas
No começo eu acreditava que era um built-in característica do WYSIWYM Markdown editor , mas Shog9 é correto: não é cozido-in em tudo, mas é cortesia do plugin jQuery TextAreaResizer (I foi desviado chumbo pelo navegador estava usando para verificar o editor de demonstração porque o Google Chrome se agrega a funcionalidade expansível em textareas-muito parecido com o navegador Safari faz).
Usando 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);
}
};
});
Isto irá transformar todos os seus textareas para crescer / diminuir. Se você quiser apenas textareas específicas para crescer / shrink - mudar a parte superior para ler assim:
angular.module('app').directive('expandingTextarea', function() {
return {
restrict: 'A',
Espero que ajude!
o que sobre isso, seu trabalho
<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>