16.11.2024

Auto-Ajuste de Textarea em Prototype: Uma Solução Sem Rolagem

Resposta Rápida

Para configurar o redimensionamento automático de um textarea usando Prototype.js, adicione um manipulador de eventos para 'keyup':

$('textarea_id').observe('keyup', function(e) {
     e.target.style.height = e.target.scrollHeight + 'px';
});

Substitua 'textarea_id' pelo id do seu textarea. Este código garante que a altura do textarea se ajuste automaticamente com base no texto inserido.

Conceito de Auto-Ajuste

Para redimensionar efetivamente um textarea em resposta ao conteúdo inserido, é crucial implementar ajustes de altura sem barras de rolagem, independentemente de o texto quebrar em uma nova linha ou exceder os limites do campo.

Cálculo Preciso da Altura

Para determinar a altura de maneira precisa, sincronizamos o textarea com um bloco div invisível que imita visualmente o textarea. A altura de rolagem deste bloco servirá como nosso indicador para definir a altura do textarea:

function updateSize(textarea) {
    var ghost = $('ghost');
    ghost.setStyle({
        width: textarea.getWidth() + 'px',
        padding: textarea.getStyle('padding'),
    });

    ghost.update(textarea.value.replace(/\\n/g, '<br/>'));
    var newHeight = ghost.scrollHeight + 'px';
    textarea.setStyle({ height: newHeight });
}

var ghost = new Element('div', { id: 'ghost' }).setStyle({
    position: 'absolute',
    visibility: 'hidden',
    wordWrap: 'break-word',
    overflow: 'hidden',
}).insertTo(document.body);

$('textarea_id').observe('keyup', function() {
    updateSize(this);
});

Ajuste de Tamanho em Tempo Real

Para redimensionamento em tempo real, vinculamos o manipulador de eventos 'input' para reagir instantaneamente às mudanças:

$('textarea_id').observe('input', function() {
    this.style.height = 'auto';
    this.style.height = this.scrollHeight + 'px';
});

Definindo Limites de Altura

Para evitar que o textarea se torne excessivamente grande, atribuímos uma altura máxima:

#textarea_id {
    max-height: 300px;
    overflow-y: auto;
}

Considerando a Exclusão de Texto

Também levamos em conta a exclusão de texto redefinindo a altura para auto, o que é útil ao reduzir a quantidade de texto.

Testes entre Navegadores

Verifique como o recurso de ajuste automático funciona em diferentes navegadores.

Visualização

Para uma representação visual, vamos criar um exemplo simples:

<textarea id="autoExpand" rows="1"></textarea>

Experimente inserir texto e observe o resultado:

Vazio:      [ ]
Uma Linha:  [ ]
Duas Linhas: [ ]
Preenchido:  [ ]

Usando Prototype.js, configuramos o redimensionamento automático:

$('autoExpand').observe('input', function(e) {
    this.style.height = 'auto';
    this.style.height = this.scrollHeight + "px";
});

Agora o textarea ajusta-se automaticamente a cada nova entrada de texto.

Refinamentos de Estilo para Usabilidade

Vamos adicionar alguns ajustes de estilo para tornar o uso do textarea mais confortável.

Espaçamento e Espaço Interno

Adicionar um pouco de espaçamento criará o espaço necessário dentro do textarea:

#textarea_id {
    padding: 10px;
    resize: vertical;
}

Definir o redimensionamento vertical ajuda a manter a aparência visual do elemento.

Controle de Quebra de Texto

Certifique-se de que a quebra de texto ocorra simultaneamente para o textarea e o bloco oculto:

#textarea_id, #ghost {
    word-wrap: break-word;
}

Ajudantes Ocultos: Bloco Invisível

Certifique-se de que o bloco invisível esteja oculto para não interromper a estrutura do documento:

#ghost {
    visibility: hidden;
}

Redimensionamento Dinâmico: Flexibilidade

Evitamos codificar tamanhos fixos, dando ao textarea a liberdade de redimensionar de forma adaptativa.

Video

Navigation