Pergunta

Como restringir o número máximo de caracteres que podem ser inseridos em um HTML <textarea>?Eu estou olhando para um cross-browser solução.

Foi útil?

Solução

O TEXTAREA tag não tem um MAXLENGTH atributo de forma que uma INPUT tag não, pelo menos não na maioria dos navegadores padrão.Uma forma muito simples e eficaz para limitar o número de caracteres que pode ser escreveu em um TEXTAREA marca é:

<textarea onKeyPress="return ( this.value.length < 50 );"></textarea>

Nota: onKeyPress, vai prevenir qualquer botão, qualquer botão incluindo a tecla backspace.

Isso funciona porque a expressão Booleana compara o comprimento do campo antes de o novo personagem é adicionado para o máximo comprimento que você deseja (50 neste exemplo, use a sua própria aqui), e retorna true se não houver espaço para mais um, false se não.Retornar false de mais eventos cancela a ação padrão.Assim, se o comprimento atual já é de 50 (ou mais), o processador devolve false, o KeyPress a ação é cancelada, e o personagem não é adicionado.

Uma mosca na sopa é a possibilidade de colar em uma TEXTAREA, o que não faz com que o KeyPress evento fogo de burlar essa verificação.Internet Explorer 5+ contém um onPaste evento cujo manipulador pode conter o de seleção.No entanto, observe que você também deve levar em conta quantos personagens encontram-se em área de transferência, para saber se a total vai levá-lo acima do limite ou não.Felizmente, ou seja, também contém uma área de transferência objeto o objeto da janela.1 Assim:

<textarea onKeyPress="return ( this.value.length < 50 );"
onPaste="return (( this.value.length +
window.clipboardData.getData('Text').length) < 50 );"></textarea>

Novamente, o onPaste de eventos e clipboardData objeto são o IE 5+ só.Para um cross-browser solução, você só vai ter que usar um OnChange ou OnBlur processador para verificar o comprimento, e a lidar com ele, no entanto, pretende (truncar o valor silenciosamente, notificar o usuário, etc.).Infelizmente, isso não pegar o erro que está acontecendo, somente quando o usuário tenta deixar o campo, o que não é tão amigável.

Origem

Também, não há outra maneira aqui, incluindo um completo script que você pode incluir em sua página:

http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html

Outras dicas

O HTML5 permite agora maxlength o atributo <textarea>.

É suportado por todos os navegadores, exceto o IE <= 9 e iOS Safari 8.4.Ver mesa de suporte em caniuse.com.

$(function(){  
  $("#id").keypress(function() {  
    var maxlen = 100;
if ($(this).val().length > maxlen) {  
  return false;
}  
})
});  

Referência Definir maxlength em Html Textarea

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top