Onkeyup

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar

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.