Scribd Logo
Upload

Welcome to Scribd!

  • Script Language

    Uploaded by

    Jorge Correa Dos Reis
    64 views4 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    64 views4 pages

    Script Language

    Uploaded by

    Jorge Correa Dos Reis

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    <script language='JavaScript'> function SomenteNumero(e){ var tecla=(window.event)?event.keyCode:e.

    which; if((tecla>47 && tecla<58)) return true; else{ if (tecla==8 || tecla==0) return true; else return false; } } </script> <html> <head> <title> Somente Nmeros </title> </head> <body> <input type='text' size='10' value='' onkeypress='return SomenteNumero(event)'> </body> </html>

    Criar input text que s aceita caracteres numricos de forma flexvel e elegante
    Ol pessoal. Hoje irei mostrar um exemplo de como transformar um input text em um componente que s aceita caracteres numricos de forma flexvel e elegante. O objetivo que apenas definindo a classe css do input ele assuma esta caracterstica. Logo, a idia que o cdigo fonte do input seja algo parecido com o cdigo abaixo:
    view plainprint?

    1.

    <input type="text" class="inputNumero" />

    Para elaborar este componente, ser feito o uso do jQuery verso 1.5.0. Primeiramente, crie um arquivo chamado inputNumero.html, com o cdigo fonte abaixo:
    view plainprint?

    1. <html> 2. <head> 3. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5. 0/jquery.min.js"></script> 4. <script type="text/javascript" src="inputNumero.js"></script> 5. </head> 6. <body> 7. Somente numeros: 8. <input type="text" class="inputNumero" /> 9. </body> 10. </html>

    Este arquivo ser usado para testar o nosso componente. Percebam que na linha 3, fazemos a referncia biblioteca jQuery v 1.5.0. Na linha seguinte, temos a referncia um arquivo chamado inputNumero.js, que ter a lgica do componente. Neste arquivo, vamos criar algumas funes. A funo abaixo, ser usada no evento onkeypress do componente.

    view plainprint?

    1. 2. 3. 4. 5. 6.

    function somenteNumeroOnkeypress(event){ var tecla = getTeclaCrossBrowser(event); var retorno = isCharPermitido(tecla); try {event.returnValue = retorno;} catch(ex) { } return retorno; }

    Basicamente chamamos uma funo para obter a tecla que foi digitada pelo usurio, e chamamos outra funo para verificar se o caractere permitido ou no (Neste exemplo, s ser aceito os caracteres de 0 9 e backspace). Abaixo segue a implementao dest as funes auxiliares:
    view plainprint?

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

    function isCharPermitido(tecla) { //podem ser incluidos mais caracteres aqui caso seja necessario.. //char de 48 a 57 correspondem de '0' a '9' //char 8 corresponde ao backspace. return (tecla >= 48 && tecla <= 57) || tecla == 8; } function getTeclaCrossBrowser(event){ var tecla = ''; if (event.which) { // Firefox tecla = event.which; } else if (event.keyCode) { // IE tecla = event.keyCode; } else if (event.charCode) { // chrome tecla = event.charCode; } return tecla; }

    A funo abaixo ser usada no evento onblur do componente.


    view plainprint?

    1. 2. 3. 4. 5.

    function soNumero(campo){ var vr = campo.value; vr = vr.replace(/\D/g,""); campo.value = vr; }

    Ela necessria para alguns casos como copiar e colar, em que o onkeypress nem sempre filtra. Agora, vamos criar a funo que ir vincular as funes aos eventos onblur e onkeypress:
    view plainprint?

    1. 2. 3. 4. 5. 6. 7. 8. 9.

    function bindingInputNumberEvents() { //modo 1 //adicionando onkeypress $('.inputNumero').keypress(function(event) { return somenteNumeroOnkeypress( event); }); //modo 2 //adicionando onblur var array = $('.inputNumero').get();

    10. 11. 12. 13. 14. 15. 16. 17. 18.

    for (var i = 0; i < array.length; i++) { var campo = array[i]; if (campo.addEventListener) {//firefox chrome etc campo.addEventListener("blur", function() { return soNumero(campo); }, false); } else if (campo.attachEvent){//ie campo.attachEvent("onblur", function() { return soNumero(campo); }); } } }

    Na linha 4, temos o seletor do jQuery: $('inputNumero '). Basicamente ele filtra todos os objetos do DOM que tem a classe css 'inputNumero'. Logo depois, chamamos o mtodo keypress passando como parametro uma funo. Podemos ler o cdigo da seguinte forma: Selecione todos os objetos do DOM que usam a classe c ss inputNumero e vincule esta funo ao evento onkeypress do objeto. No onblur, apenas resolvi mostrar outra maneira (mais manual) de vincular os eventos aos componentes. Ento, criada funo bindingInputNumberEvents(), precisamos chama -la de alguma forma aps carregar a DOM. O cdigo abaixo faz exatamente isto:
    view plainprint?

    1. 2. 3.

    $(document).ready(function(){ bindingInputNumberEvents(); });

    Terminada esta funo, teremos o arquivo inputNumero.js da seguinte forma:


    view plainprint?

    1. function isCharPermitido(tecla) { 2. //podem ser incluidos mais caracteres aqui caso seja necessrio.. existem browsers que detectam alguns caracteres como direcionais, delete, tab, etc... 3. //char de 48 a 57 correspondem de '0' a '9' 4. //char 8 corresponde ao backspace. 5. return (tecla >= 48 && tecla <= 57) || tecla == 8; 6. } 7. function getTeclaCrossBrowser(event){ 8. var tecla = ''; 9. if (event.which) { // Firefox 10. tecla = event.which; 11. } else if (event.keyCode) { // IE 12. tecla = event.keyCode; 13. } else if (event.charCode) { // chrome 14. tecla = event.charCode; 15. } 16. return tecla; 17. } 18. function somenteNumeroOnkeypress(event){ 19. var tecla = getTeclaCrossBrowser(event ); 20. var retorno = isCharPermitido(tecla); 21. try {event.returnValue = retorno;} catch(ex) { } 22. return retorno; 23. } 24. //por desencargo, esta ser usada no onblur 25. function soNumero(campo){ 26. var vr = campo.value; 27. vr = vr.replace(/\D/g,""); 28. campo.value = vr; 29. } 30. 31. //adicionando os eventos nos inputs 32. function bindingInputNumberEvents() { 33. //modo 1 34. //adicionando onkeypress

    35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55.

    $('.inputNumero').keypress(function(event) { return somenteNumeroOnkeypress(event); }); //modo 2 //adicionando onblur var array = $('.inputNumero').get(); for (var i = 0; i < array.length; i++) { var campo = array[i]; if (campo.addEventListener) {//firefox chrome etc campo.addEventListener("blur", function() { return soNumero(campo); }, false); } else if (campo.attachEvent){//ie campo.attachEvent("onblur", function() { return soNumero(campo); }); } } } //quando o dom tiver carregado... $(document).ready(function(){ //adicionando eventos... bindingInputNumberEvents(); });

    Podemos conferir o exemplo funcionando clicando aqui. Enfim pessoal, esta foi a minha primeira postagem e espero que tenham gostado. At mais! Referncias: http://jquery.com *Obs: Este exemplo foi testado usando um teclado pt -BR, SO Windows 7, e apenas nos browsers Google Chrome 9+, Internet Explorer 7+, Mozilla Firefox 3.6+ e Safari 5+.

    You might also like