Comprimento máximo para HTML <textarea>
-
09-06-2019 - |
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.
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.
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