Onkeyup: mudanças entre as edições
De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
| Linha 10: | Linha 10: | ||
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 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?)'' | |||
<pre> | |||
<!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> | |||
</pre> | |||
''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.'' | |||
Edição das 15h50min de 31 de outubro de 2013
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.
