A implementação de um textarea redimensionável?

StackOverflow https://stackoverflow.com/questions/149421

  •  02-07-2019
  •  | 
  •  

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.

autosizing-textarea

que fala redimensionamento mais sobre automaticamente textareas enquanto eu quero a garra-área pouco que você pode arrastar para cima e para baixo.

Foi útil?

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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top