Onkeyup
Onkeyup , Onkeypress e Onkeydown
Qual a diferença entre os eventos onkeypress, onkeyup e onkeydown?
Muitas vezes os eventos onkeypress, onkeyup e onkeydown são utilizados para o mesmo fim: receber os eventos do teclado. Entretanto existem algumas diferenças básicas no funcionamento deles.
A diferença primordial entre eles é relacionado a quando os eventos são disparados. O onkeydown é disparado assim que a tecla é pressionada, sendo assim o primeiro entre os eventos a ser disparado. Em seguida é a vez do onkeypress e por último, quando a tecla é solta, o evento onkeyup é executado.
A função java-script abaixo efetua a contagem de caracteres de um campo textarea (poderia ser um input text, ok?)
<!doctype html>
<HTML>
<HEAD>
<TITLE>Contador de Caracteres</TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<META name=charset content=ISO-8859-1>
<META name=autor content="Ricardo Spinoza">
<META name=revisit-after content=3>
<META name=title content="Contador de Caracteres">
<META name=description content="count chars, count letters, count words, count numbers, javascript, java-script,Contador de caracter, Contador de Caracteres, Contador de Letras, Contador de Digitos, Contador de texto, Quantidade de Caracteres, Quantidade de Letras">
<META name=keywords content="count chars, count letters, count words, count numbers, javascript, java-script,Contador de caracter, Contador de Caracteres, Contador de Letras, Contador de Digitos, Contador de texto, Quantidade de Caracteres, Quantidade de Letras">
<SCRIPT>
function contador(evt){
//tratamento event p/ diversos browsers
evt = evt || window.event;
var targ = evt.target || evt.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
//##end event
//antigo codigo
//document.forms[0].caracteres.value=document.forms[0].texto.value.length
//[update] novo - sugestão no comments - Dicas de Excel
//agora está generico. ser houver mais de um textarea, o js atende.
document.getElementById('caracteres').value=targ.value.length;
}
</SCRIPT>
<style>html,body{margin:0px !important;}</style>
</head>
<body>
<div style="display:block!important;width:100%!important;z-index:2147483647!important;margin:0 auto!important;align:center;"><center><script type="text/javascript">if(top.location.href==self.location.href){XPGBanner(728,90);};XPGBannerDHTML();</script></center></div>
<DIV id=flashad></DIV>
<DIV id=fb-root></DIV>
<CENTER>
<DIV style="COLOR: blue" class=texto><B>Exemplo de contador de caracteres. Digite ou cole o texto para o programa efetuar a contagem<BR /><br /></B></DIV>
<DIV style="COLOR: blue" class=texto><B>Digite seu texto na caixa abaixo:<BR /><br /></B></DIV>
<FORM method=post action=#>
<TEXTAREA onkeydown=contador(event) onkeyup=contador(event) name=texto></TEXTAREA>
<BR><BR><b>Quantidade de caracteres:
<INPUT style="COLOR: blue;BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; FONT: bold 14px #687849; BORDER-TOP: 0px; BORDER-RIGHT: 0px" value=0 name="caracteres" id="caracteres">
</b>
<br />
<br />
</FORM>
</CENTER>
<BR>
</body>
</HTML>
A função contador() é acionada pelos eventos onkeydown onkeyup do campo “texto” do form. Desta forma, capturamos o tamanho da string informada pela propriedade value.length. e atribuímos o tamanho no campo input pra exibir para o usuário.
