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.
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.
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).
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.
— Gabriel Pizorusso Chierentin 07 de May de 2020Estamos 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.
— Bruno Gasparetto 07 de May de 2020Não consegui fazer funcionar, Bruno. Pode me ajudar? Se puder, segue meu skype: "pizorusso"
— Gabriel Pizorusso Chierentin 07 de May de 2020Claro. Quando chegar em casa, saindo da empresa agora, mando contato no skype
— Bruno Gasparetto 07 de May de 2020