项目作者: DevUtils

项目描述 :
Simple and fast number input masks
高级语言: JavaScript
项目地址: git://github.com/DevUtils/jQuerySimpleMask.git
创建时间: 2014-11-18T14:26:51Z
项目社区:https://github.com/DevUtils/jQuerySimpleMask

开源协议:MIT License

下载


jQuerySimpleMask

Simple and fast number input masks

npm version License: MIT

Demo

https://devutils.github.io/jQuerySimpleMask

Usage

  1. <form>
  2. <p>
  3. <label for="frCep">CEP</label><br/>
  4. <input type="text" name="frCep" id="frCep"/>
  5. </p>
  6. <p>
  7. <label for="frDtel">(DDD) Telefone</label><br/>
  8. <input type="text" name="frDtel" id="frDtel"/>
  9. </p>
  10. <p>
  11. <label for="frTel">Telefone</label><br/>
  12. <input type="text" name="frTel" id="frTel"/>
  13. </p>
  14. <p>
  15. <label for="frData">Data</label><br/>
  16. <input type="text" name="frData" id="frData"/>
  17. </p>
  18. <p>
  19. <label for="frCpf">CPF</label><br/>
  20. <input type="text" name="frCpf" id="frCpf"/>
  21. </p>
  22. <p>
  23. <label for="frCnpj">CNPJ</label><br/>
  24. <input type="text" name="frCnpj" id="frCnpj"/>
  25. </p>
  26. <p>
  27. <label for="frCallback">With Callback</label><br/>
  28. <input type="text" name="frCallback" id="frCallback"/>
  29. </p>
  30. </form>

Helper mode

  1. $(document).ready
  2. (
  3. function()
  4. {
  5. $('#frCep' ).simpleMask( { 'mask': 'cep' , 'nextInput': false } );
  6. $('#frDtel').simpleMask( { 'mask': 'ddd-tel9', 'nextInput': false } );
  7. $('#frTel' ).simpleMask( { 'mask': 'tel9' , 'nextInput': false } );
  8. $('#frData').simpleMask( { 'mask': 'data' , 'nextInput': false } );
  9. $('#frCpf' ).simpleMask( { 'mask': 'cpf' , 'nextInput': false } );
  10. $('#frCnpj').simpleMask( { 'mask': 'cnpj' , 'nextInput': false } );
  11. }
  12. );

Custom mode

  1. $(document).ready
  2. (
  3. function()
  4. {
  5. $('#frCep' ).simpleMask( { 'mask': '#####-###' , 'nextInput': $('#frDtel') } );
  6. $('#frDtel').simpleMask( { 'mask': ['(##) ####-####', '(##) #####-####'], 'nextInput': $('#frTel' ) } );
  7. $('#frTel' ).simpleMask( { 'mask': ['####-####', '#####-####'] , 'nextInput': $('#frData') } );
  8. $('#frData').simpleMask( { 'mask': '##/##/####' , 'nextInput': $('#frCpf' ) } );
  9. $('#frCpf' ).simpleMask( { 'mask': '###.###.###-##' , 'nextInput': $('#frCnpj') } );
  10. $('#frCnpj').simpleMask( { 'mask': '##.###.###/####-##' } );
  11. $('#frCallback').simpleMask
  12. (
  13. {
  14. 'mask' : '#####',
  15. 'nextInput' : true,
  16. 'onComplete' : function(element)
  17. {
  18. console.log('onComplete', element);
  19. }
  20. }
  21. );
  22. }
  23. );