README 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. jquery.inputmask is a jquery plugins which created an input mask ;-)
  2. The plugin is based on the maskedinput plugin of Josh Bush (http://digitalbush.com/projects/masked-input-plugin), but has finer control over the 'mask-definitions')
  3. A definitions can have a cardinality and have multiple prevalidators.
  4. Example of some new definitions:
  5. 'd': { //day
  6. "validator": "0[1-9]|[12][0-9]|3[01]",
  7. "cardinality": 2,
  8. "prevalidator": [{ "validator": "[0-3]", "cardinality": 1}]
  9. },
  10. 'm': { //month
  11. "validator": "0[1-9]|1[012]",
  12. "cardinality": 2,
  13. "prevalidator": [{ "validator": "[01]", "cardinality": 1}]
  14. },
  15. 'y': { //year
  16. "validator": "(19|20)\\d\\d",
  17. "cardinality": 4,
  18. "prevalidator": [
  19. { "validator": "[12]", "cardinality": 1 },
  20. { "validator": "(19|20)", "cardinality": 2 },
  21. { "validator": "(19|20)\\d", "cardinality": 3 }
  22. ]
  23. }
  24. These allow for a finer date validation then 99/99/9999 which also allows 33/33/3333 for example.
  25. Usage:
  26. Include the js-files
  27. <script src="jquery.js" type="text/javascript"></script>
  28. <script src="jquery.inputmask.js" type="text/javascript"></script>
  29. Define your masks:
  30. $(document).ready(function(){
  31. $("#date").inputmask("d/m/y"); //direct mask
  32. $("#phone").inputmask("mask", {"mask": "(999) 999-9999"}); //specifying fn & options
  33. $("#tin").inputmask({"mask": "99-9999999"}); //specifying options only
  34. });
  35. Extra options:
  36. change the placeholder
  37. $(document).ready(function(){
  38. $("#date").inputmask("d/m/y",{ "placeholder": "*" });
  39. });
  40. execute a function when the mask is completed
  41. $(document).ready(function(){
  42. $("#date").inputmask("d/m/y",{ "onComplete": function(){ alert('inputmask complete'); } });
  43. });
  44. mask repeat function
  45. $(document).ready(function(){
  46. $("#number").inputmask({ "mask": "9", "repeat": 10 }); // ~ mask "9999999999"
  47. });
  48. mask non-greedy repeat function
  49. $(document).ready(function(){
  50. $("#number").inputmask({ "mask": "9", "repeat": 10, "greedy": false }); // ~ mask "9" or mask "99" or ... mask "9999999999"
  51. });
  52. get the unmaskedvalue
  53. $(document).ready(function(){
  54. $("#number").inputmask('unmaskedvalue');
  55. });
  56. set a value and apply mask
  57. $(document).ready(function(){
  58. $("#number").inputmask('setvalue', 12345);
  59. });
  60. add custom definitions
  61. $.extend($.inputmask.defaults.definitions, {
  62. 'f': {
  63. "validator": "[0-9\(\)\.\+/ ]",
  64. "cardinality": 1,
  65. 'prevalidator': null
  66. }
  67. });