<textarea> com tamanho variável no Pai x Filho

TOTVS Fluig Páginas (WCM)
, ,
1

Olá pessoal, boa noite!

Por acaso alguém poderia me ajudar como ter um textarea com tamanho variável numa tabela de Pai x Filho?

Achei este post: TextArea com tamanho varíavel, mas ele não funciona no Pai x Filho.

Desde já muito obrigado.

2

Se a intenção é fazer o redimensionamento em todo textarea do formulário você pode usar esse código (baseado no código do tópico que você informou):


/**
 * Faz o redimensionamento do textarea conforme recebe caracteres
 */
function textareaResize() {
            let textarea = $(this),
                rows = parseInt(textarea.attr('rows')) || 1,
                scrollHeight = parseFloat(this.scrollHeight) || 0,
                lineHeight = parseFloat(textarea.css('line-height').replace(/[^0-9\.]+/g, '')) || 16,
                borderTop = parseFloat(textarea.css("borderTopWidth").replace(/[^0-9\.]+/g, '')) || 0,
                borderBottom = parseFloat(textarea.css("borderBottomWidth").replace(/[^0-9\.]+/g, '')) || 0,
                tamanhoMinimo =  rows * lineHeight,
                tamanhoCalculado = scrollHeight + borderTop + borderBottom;

            textarea.css({
                height: tamanhoCalculado > tamanhoMinimo ? tamanhoCalculado : tamanhoMinimo
            });
        }

$(function () {
            // Você pode usar o id do formulário ou outro seletor JQuery
            $('#gestaoAcesso')
                .on('keyup', 'textarea', textareaResize)
                .find('textarea')
                    .trigger('keyup');
        });

Explicando a principal diferença.

O código original escutava os eventos em todos os textareas que já existiam no HTML $('textarea').on('keyup', function () {}). O problema é quando você insere um item no pai filho, pois ele cria um novo textarea e ele não possui o evento atrelado a ele.

Então o jeito pra tratar isso é escutar o evento num elemento pai (DOM) e filtrar pra só executar caso seja disparado por um textarea: $('#id_tabela_pai_filho').on('keyup', 'textarea', function () {}).

Você pode fazer isso somente na tabela do pai filho ou fazer no formulário (que é o que indiquei).

3

Antes de mais nada muito obrigado, tentei te procurar no Skype para agradecer, mas sem sucesso.

Vou testar esta nova versão, mas pela manhã quando peguei o código anterior eu percebi que fazendo alguns pequenos ajustes funcionou para o Pai x Filho.

O segredo basicamente era adicionar o evento depois de adicionar o filho.

Todavia, irei testar o código novo e te falo.

4

Estamos aqui pra isso. Ajudar e trocar experiências. É mais performático fazer como mostrei, fazendo o evento no elemento pai, pois assim são menos eventos criados (própria recomendação da JQuery). Única coisa que acho mais interessante é remover aquele trecho .css({overflow: ‘hidden’, resize: ‘none’}) do JavaScript e deixar isso no CSS: textarea {overflow: hidden; resize: none;} , pois assim já pega todos os textareas e é menos manipulação no DOM.

5

Não consegui fazer funcionar, Bruno. Pode me ajudar? Se puder, segue meu skype: “pizorusso”

6

Claro. Quando chegar em casa, saindo da empresa agora, mando contato no skype