Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Kakashi_Hatake

[Resolvido] Problema com onkeypress

Por , em Javascript

Recommended Posts

Kakashi_Hatake    267

Kakashi_Hatake
Postado

Salve galera, Estou com um problema que parece ser fácil mas não consegui resolver. :rolleyes:

 

O script está com um "atraso" na hora de aplicar uma máscara, tipo se eu digito 123 a máscara deveria mudar para (12) 3, mas só funciona quando digitado 4 números. ex.: 1234 daí sim fica (12) 34.

 

Segue o script:

<html>
   <head>
       <title>Test Mask</title>
       <script>
           function Mask( )
           {                
               this.phone = function( obj )
               {
                   obj.value = obj.value
                   .replace( /\D/g, '' )
                   .replace( /^(\d\d)(\d)/g, '($1) $2' )
                   .replace( /(\d{4})(\d)/, '$1-$2' );
               }               
           }
           mask = new Mask( );
       </script>
   </head>
   <body>
       <label>Phone:<input type="text" name="phone" onkeypress="mask.phone( this );" maxlength="14"/></label>
   </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

DesenvolvedorRoger    50

DesenvolvedorRoger
Postado

O Delay é por causa do evento mesmo e está correto... Ou então mude para KeyUp

 

Contudo, nesse caso(KeyPress), altere para:

...

this.phone = function( obj )
               {
                   obj.value = obj.value
                   .replace( /\D/g, '' )
                   .replace( /^(\d\d)/g, '($1)' )
                   .replace( /(\d{4})(\d)/, '$1-$2' );
               }  
...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Atente para o fato de que keypress é executado assim que a tecla é pressionada, antes de o seu valor ser colocado no campo.

Para o seu caso, o mais adequado é keydown ou keyup.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kakashi_Hatake    267

Kakashi_Hatake
Postado

Valeu @DesenvolvedorRoger, não tinha testado utilizando onkeyup <_<

 

Para quem se interessar, a chamada ficou assim:

<label>Phone:<input type="text" name="phone" onkeyup="mask.phone( this );" maxlength="14"/></label>

 

:thumbsup:

 

[EDIT]

 

@Henrique Barcelos

 

Neste caso funcionou(onkeyup) em todos os IE's(desde 5.5) e os demais navegadores.

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

Apenas uma sugestão, não use eventos inline, quando teu HTML ficar complexo vai virar uma dor de cabeça manter, e mesmo que teu HTML não venha se tornar complexo, é sempre bom seguir boas práticas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado
@Henrique Barcelos

 

Neste caso funcionou(onkeyup) em todos os IE's(desde 5.5) e os demais navegadores.

onkeyup e onkeydown são eventos 'irmãos'. A diferença é que onkeyup só é disparado quando você solta a tecla, enquanto onkeydown é disparado assim que você pressiona a tecla.

onkeypress é um evento onkeydown seguido de um evento onkeyup.

 

Os dois primeiros representam uma tecla sendo pressionada, enquanto que o último representa um caractere sendo digitado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kakashi_Hatake    267

Kakashi_Hatake
Postado

Resolvi o problema do delay com o onkeypress. Utilizei o setTimeout

 


function Mask( )
{
   var object = this;

   this.phone = function( obj )
   {
       obj.value = obj.value
       .replace( /\D/g, '' )
       .replace( /^(\d\d)(\d)/g, '($1) $2' )
       .replace( /(\d{4})(\d)/, '$1-$2' );
       setTimeout( function( ){ object.phone( obj ); }, 1 );
   }             
}

mask = new Mask( );

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito