Maxlength No Textarea

[DataSet]

Como uso o maxlength=80 neste textarea?

<textarea rows=2 name=ruFra class=obs></textarea>

parece que não aceita maxlength ele deixa digitar um texto inteiro...

Como limitar para 80 caracteres?

Valeu...

[Crystian]

cara há um tempo atrás eu usei esse script... vê se te ajuda...

/*
    Função para não deixar inserir mais de um determinado N° de caracteres no textarea
*/
function LimitaTamanho(campo, limite){
    valor = eval("document.forms[0]."+campo+".value");
    limite = parseInt(limite);
    if(valor.length > limite){
        erroValue = ("O Valor máximo do campo é "+limite+" caracteres.");
        return false;
    }
    return true;
}

é só passar o nome no campo que você quer limitar e a quantidade de caracteres máximo.

Abraço

Crystian

[Vilela]

mas como faço para chamar essa função??

[Crystian]

no onkeydown do textarea... ou no onblur... você q escolhe....

[Vilela]

cara, n manjo nada de JS... tem como me dar um exemplo?

[Crystian]

<textarea name="limitaText" onKeyDown="LimitaTamanho(this.name, 100);"></textarea>

É só chamar aquela function num evento do textarea, no caso acima estou passando no evento q o cara aperta uma tecla (onkeydown), então quando chegar a 100 caracteres q é o limite que passei ele não deixa mais digitar...

Tendeu???

Abraço

Crystian

[George]

eu fiz assim:

function aoa() {
    if (form.input.value.length >= 10) {
        return false;
    }
}

mas não deu certo...e o que está dando erro é o return false; visto que quando eu coloco uma alert em vez do return false funciona normalmente...ajuda?

[Guest Ajuda! Maxlenght]

Pessoal, estou precisando de uma ajuda também. Já coloquei um código HTML igual ao dessa página, e outro semelhante, mas das duas uma:

1 - Ou aparece uma janela pop-up dizendo que o internauta alcançou o limite de 1.000 caracteres, não o deixando enviar o formulário se ele clicar em "Enviar mensagem", mas ainda assim permitindo o cursor ficar ativo e o sujeito continuar a edição;

Ou:

2 - Ao chegar no limite de caracteres, o cursor simplesmente desaparece e você não pode mais editar o texto pra arrumar.

Vamos supor que alguém escreva um texto bem caprichado num formulário, e quando chegasse no limite, essa pessoa (que não salvou o texto antes de digitar) não poderia mais fazer um copy-paste (control + C e control + V em outro lugar) daquele texto. Ou seja, chegou ao limite, a única saída é clicar em "Apagar campos preenchidos"! E se ferrou!

Essa segunda opção aí parece que é a proposta aqui no tópico. A outra é ruim também.

Eu queria uma terceira, vou tentar explicar pra ver se vocês podem me ajudar:

3 - Eu queria que enquanto a pessoa digitasse, aparecesse um indicativo de quantos caracteres ela digitou. Eu já vi um código desses, mas não lembro onde era. Ficava mais ou menos assim:

Você digitou 200 caracteres de 1.000 permitidos.

Sendo que o 200 e o 1000 eram campos preenchidos automaticamente pelo código HTML. Quando chegasse no limite, o contador iria pro zero;

A outra melhoria no código seria fazê-lo ficar igual ao ORKUT - ou seja - quando a pessoa chegasse no limite determinado de 1.000 caracteres, o cursor simplesmente voltaria sozinho pro último caractere digitado. Se você continuasse digitando/tentando colar alguma coisa, o cursor "empacaria", sempre voltando até o último caractere digitado.

Quem quiser ver EXATAMENTE COMO ISSO FUNCIONA, acesse o Orkut e tente digitar mais que 2.048 caracteres na caixa de mensagem.

Vou colar aqui um dos códigos que estou usando, que diz respeito ao exemplo 1.

Por favor, se alguém souber como fazer esse 3.1 e 3.2 (principalmente o 3.2! esse é essencial!) poste aqui.

Tenho certeza que um código desses ajudaria muita gente (não só a mim), pois por mais que a caixinha pop-up seja útil, na prática incomoda toda vez você ser surpreendido por ela quando digitar um formulário.

Nesse segundo exemplo, eu troquei onkeypress pra onkeydown e ficou bugado desse mesmo jeito (ao chegar no limite de caracteres, trava a edição, fica ruim do jeito que expliquei).

[Guest Ajuda! Maxlenght]

Epa, eu já ia esquecendo de colar meu código-fonte (do ex. 1): :D

******** CÓDIGO ************

<br>
<form onsubmit="return verify();" method="POST" action="http://serviço redirecionador de formulários.php">
<HEAD>
<script language="JavaScript">
max = 1000;
function verify(a)
{
a = document.getElementById('abcd');
if (a.value.length > max)
{
alert('Você só pode digitar até '+ max + ' caracteres.');
a.focus();
return false;
}
}
</script>
</HEAD>
<p align="center">
<font face="Verdana"><font style="font-size: 11pt"><br>
</font><font style="font-size: 18pt; font-weight:700">Deixe aqui o seu recado!</font></font></p>
<p align="center">
<font face="Verdana"><font style="font-size: 11pt">Seu nome/apelido</font><font size="2">&nbsp; </font> <input type="text" name="nomedointernauta" size="30" maxlength="40"><font size="2"> 
*<br>
<br>
</font> <font style="font-size: 11pt">Seu
</font> <span style="font-size: 11pt">E-mail</span><span style="font-size: 10pt"> 
(<i>não será divulgado</i>)</span><font size="2"> </font> <input type="text" name="emaildointernauta" size="25" maxlength="40"><font size="2"> 
*<br>
</font> <font style="font-size: 11pt"><br>
Sua Profissão</font><font size="2"> </font> 
<input type="text" name="profissaodointernauta" size="20" maxlength="40"><font size="2"> 
*</font><font style="font-size: 11pt"><br>
<br>
Sua Localidade</font><font size="2"> (Cidade, Estado (e País se fora do Brasil) </font> <input type="text" name="localidadedointernauta" size="20" maxlength="40"><font size="2"> 
*<br>
<br>
<br>
* Campos de preenchimento obrigatório.<br>
<br>
<br>
</font><font style="font-size: 11pt">O que você achou do site no geral?</font><font size="2"><br>
(<i>preenchimento opcional</i>)</font><font style="font-size: 11pt"><br>
</font><font size="2"><br>
</font>
<span style="font-size: 11pt">
<input type="radio" name="avaliacaodosite" value="otimo"></span><font style="font-size: 10pt"> 
Ótimo<br>
</font>
<span style="font-size: 11pt">
<input type="radio" name="avaliacaodosite" value="muitobom"></span><font style="font-size: 10pt"> 
Muito Bom<br>
</font>
<span style="font-size: 11pt">
<input type="radio" name="avaliacaodosite" value="bom"></span><font style="font-size: 10pt"> 
Bom<br>
</font>
<span style="font-size: 11pt">
<input type="radio" name="avaliacaodosite" value="regular"></span><font style="font-size: 10pt"> 
Fraco/Mediano<br>
</font>
<span style="font-size: 11pt">
<input type="radio" name="avaliacaodosite" value="ruim"></span><font size="2"> 
Ruim</font><font style="font-size: 11pt"><br>
<br>
Escreva aqui o seu recado:<br>
<br>
</font>
<textarea id="abcd" cols="40" rows="9" name="comentariosdointernauta"></textarea><font size="2">
<br>
<br>
<br>
</font>
<input type="submit" value="Clique aqui para enviar a sua mensagem"><font size="2">
<br>
<br>
<br>
</font>
<input type="Reset" value="Apagar todos os campos preenchidos"></font></p>
</form>

******** CÓDIGO ************

[fercosmig]

ve se ajuda ae

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function verifica_qtd(){
    vQtd = document.getElementById('tst');
    if(vQtd.value.length >= 5){
        //alert('maximo 5 caracteres');
        vQtd.focus();
        return false;
    }
}
//-->
</script>
</head>
<body>
<textarea name="teste" id="tst" onkeypress="java script:return verifica_qtd();"></textarea>
</body>
</html>

[Guest Ajuda! Maxlenght!]

Olá, o código em questão não funciona. O erro apresentado é esse:

Linha 80, caractere 6.

Erro: ";" esperado.

Sendo que esse símbolo faltante está exatamente neste ponto:

</bod

Se ele fosse inserido nesse documento, ele ficaria assim:

********* CÓDIGO ************

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function verifica_qtd(){
    vQtd = document.getElementById('tst');
    if(vQtd.value.length >= 5){
        //alert('maximo 5 caracteres');
        vQtd.focus();
        return false;
    }
}
//-->
</script>
</head>
<body>
<textarea name="teste" id="tst" onkeypress="java script:return verifica_qtd();"></textarea>
</bod;y>
</html>

********* CÓDIGO ************

Não consegui consertar de jeito nenhum. :(

E quanto você cola um texto muito grande, ele deixa do mesmo jeito.

[Guest Ajuda! Maxlenght!]

Ahhhhhhhhh agora vi qual era o erro. :D

Você colocou java script ali ao invés de javascript pegado. :D

Fiz um teste no IE (que tem JS habilitado) e funcionou! Após a pessoa digitar 5 caracteres ali (limite que pode ser alterado), ela não consegue digitar mais, e a edição ainda é permitida. Ou seja, funciona como o Orkut. Vi que você colocou uma função "alert", que no meu caso, eu não queria que aparecesse, mas vou ver se ela é mostrada (uma caixinha pop-up com o aviso de que a pessoa passou do limite).

Mas valeu mesmo, era esse código que eu procurava. :)

[Guest Ajuda! Maxlenght!]

Ahhhhhhhh, eu me precipitei! :(

O código ainda está errado. Eu havia feito um teste no IE, e ele permite sim apagar o caractere, mas não permite que se digite mais nada. Não permite a edição. O problema continua - se a pessoa digita um texto bem caprichado, e ela alcança o limite, o texto fica "travado" e ela não pode mais fazer nada, a não ser apagar tudo.

Em resumo: o código postado pelo colega fercosmig é absolutamente igual ao código problemático número 2 que eu falei no meu primeiro post aqui no tópico, e igual ao código proposto pelo autor deste tópico. E não há função de "alert" funcionando aqui. O teste foi realizado tanto pelo IE como Firefox e em ambos com JS ativado, o código apresenta esse problema.

Quem não está com paciência de olhar o Orkut, vou tentar explicar mais como o código deles funciona:

Vamos supor que o limite seja de 5 caracteres, como colocado acima.

E eu digite:

Script (palavra de 6 caracteres).

Enquanto estou digitando, o Orkut permite que eu digite. Quando digitar a palavra T, ele irá apagar automaticamente e retornar o cursor até a letra "p". A caixa de texto (textarea) ficará impossível de ser editada, a menos que você remova o texto excedente.

Aí vocês podem perguntar "então qual é a diferença desse código aqui?".

Simples.

O código colocado aqui não faz o cursor retornar e apagar sozinho o texto excedente.

Se eu fizer um copy-paste de um texto de 200 caracteres no exemplo acima (onde só cabem 5), o Orkut irá remover 195 caracteres automaticamente, e você não poderá passear com o cursor pelo texto a menos que deixe ele com 4 caracteres, de preferência.

Mesmo se chegar ao limite de 5 (ou 2048, como é hoje), o cursor ficará parado até que você remova o texto excedente, mas parado que eu digo é no último caractere digitado ou no primeiro.

O código colocado aqui trava 100% o cursor, de uma maneira que sequer permite que a pessoa recupere esse texto digitado. Nesse exemplo do Orkut, a caixa fica "instável", como se estivesse pedindo que você removesse o texto pra que ele ficasse um pouco mais distante do limite. Tanto é que mesmo quando eu preciso colocar algum texto lá grande, eu nunca chego perto dos 2.048 caracteres, sempre deixo uma sobra.

Quem quiser verificar isso, acesse o Orkut (já que por mais que se explique aqui, fica sempre a dúvida se o cara nunca viu esse recurso funcionando mesmo).

E lá no Orkut não há função de alerta, que acho desnecessária pois a auto-remoção do texto excedente (e a maneira como a caixa funciona, que eu expliquei acima) já seria auto-explicativa.

[flavio]

Meu caro visitante, se cadastre aí no Fórum (é de graça) !

Tenta este código aqui: (de brinde, viu!?)

<html>
<head>
<script language="JavaScript" type="text/javascript">
var timer;

function limitarTamanho(tamanho) {
//ta = TextArea
//tamanho = maximo de caracteres permitidos
    var ta = document.getElementById("texto");
    if(ta.value.length > tamanho)
        ta.value = ta.value.substring(0, tamanho);
    timer = setTimeout("limitarTamanho(" + tamanho + ")", 100);
    return;
}

function pararLimitacao() {
    clearTimeout(timer);
    return;
}
</script>
</head>
<body>
    <textarea name="texto" id="texto" onfocus="limitarTamanho(20)" onblur="pararLimitacao()">
    </textarea>
</body>
</html>

[Guest --Webmaster --]

That's it! :D

Era exatamente esse o código que eu procurava! Fiz um teste no Frontpage (depois farei em um site) e ele remove o texto excedente, não deixando a pessoa digitar mais do que 20 caracteres (o limite que você colocou). Alguém arquive essa resposta do flavio, pois esse é o formulário ideal!

Só fiquei curioso em saber o que é essa função exatamente:

timer = setTimeout("limitarTamanho(" + tamanho + ")", 100);

Tanto faz colocar 100 ou qualquer outro número aí? Pergunto isso pois de JS não entendo.

Mas de qualquer forma vou deixar da forma como você colocou, só mudando o nome da textarea pra coincidir com o que eu já havia escolhido pro site que redireciona meus formulários (já que a maioria dos serviços gratuitos não suportam PHP ou CGI.

[flavio]

controle = setTimeout(funcao, intervalo)

A instrução acima faz com que determinada funcao seja executada a cada intervalo de tempo dado em milissegundos.

Ela retorna uma referência controle que permite ao programador interromper a sua execução manualmente (normalmente usada em funções recursivas, como em relógios)

Veja que por eu ter usado recursão (a função chama a si mesmo) tive de usar o timer. Até porque, quando o textarea perder o foco, não haverá necessidade de continuar verificando o tamanho do texto, certo!? você pode até alterar esse valor desde que seja pra menos que 1000 (= 1 segundo = muito tempo).

[Guest Jota]

Continuando o problema do maxlengh no textarea. Alguém já passou pelo problema da tecla backspace??

Quando você aciona ela pela primeira vez ao invés dela decrementar a quantidade digitada ela encrementa. Vou postar o código que estou usando:

&lt;script type="text/javascript">

function contagem(campo, tamanhoMax) {

obj = document.getElementById(campo);

if (tamanhoMax !=0) {

if (obj.value.length > tamanhoMax) {

obj.value = obj.value.substring(0, tamanhoMax - 1);

}

}

document.meuform.contador.value = obj.value.length + 1 + ' caracteres digitados (máximo 200).';

}

</script>

<textarea name="observacoes" id="observacoes" rows="4" cols="50" onkeydown="return contagem('observacoes', 200);"></textarea>

<input name="contador" type="text" id="contador" title="campo para contar o número de caracteres inseridos no textarea, só funciona com o javascript habilitado" disabled="disabled" class="caixa" size="41" maxlength="41" />