UMA SOLUÇÃO COMPLETA AINDA SIMPLES
Atualizado 2020-05-14
(Suporte aprimorado ao navegador para celulares e tablets)
O código a seguir funcionará:
- Na entrada da tecla.
- Com texto colado (clique com o botão direito do mouse e ctrl + v).
- Com texto recortado (clique com o botão direito do mouse e ctrl + x).
- Com texto pré-carregado.
- Com todas as áreas de texto (caixas de texto com várias linhas ) site área de amplo.
- Com o Firefox (v31-67 testado).
- Com o Chrome (v37-74 testado).
- Com o IE (v9-v11 testado).
- Com o Edge (v14-v18 testado).
- Com o IOS Safari .
- Com o navegador Android .
- Com o modo estrito de JavaScript .
- O w3c é validado.
- E é simplificado e eficiente.
OPÇÃO 1 (com jQuery)
Esta opção requer jQuery e foi testada e está funcionando com 1.7.2 - 3.3.1
Simples (adicione esse código jquery ao seu arquivo de script mestre e esqueça-o.)
$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT.
This javascript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
Test on jsfiddle
OPÇÃO 2 (JavaScript puro)
Simples (adicione este JavaScript ao seu arquivo de script mestre e esqueça-o.)
const tx = document.getElementsByTagName('textarea');
for (let i = 0; i < tx.length; i++) {
tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
tx[i].addEventListener("input", OnInput, false);
}
function OnInput() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
Test on jsfiddle
OPÇÃO 3 (extensão jQuery)
Útil se você deseja aplicar um encadeamento adicional às áreas de texto que deseja dimensionar automaticamente.
jQuery.fn.extend({
autoHeight: function () {
function autoHeight_(element) {
return jQuery(element)
.css({ 'height': 'auto', 'overflow-y': 'hidden' })
.height(element.scrollHeight);
}
return this.each(function() {
autoHeight_(this).on('input', function() {
autoHeight_(this);
});
});
}
});
Invocar com $('textarea').autoHeight()
ATUALIZAÇÃO DA TEXTAREA ATRAVÉS DO JAVASCRIPT
Ao injetar conteúdo em uma área de texto via JavaScript, acrescente o código a seguir para chamar a função na opção 1.
$('textarea').trigger('input');
ALTURA DE TEXTAREA PRESET
Para corrigir a altura inicial da área de texto, você precisará adicionar uma condição adicional:
const txHeight = 16;
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
if (tx[i].value == '') {
tx[i].setAttribute("style", "height:" + txHeight + "px;overflow-y:hidden;");
} else {
tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
}
tx[i].addEventListener("input", OnInput, false);
}
function OnInput(e) {
this.style.height = "auto";
this.style.height = (this.scrollHeight) + "px";
}
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>