Aug 26

Javascript Input Mask / Javascript Input Filtreleme

Javascript No Comments »

Bir iş dolayısı ile Prototype framework ile entegre çalışan bir input filtreleme / mask kodu yazmam gerekti , araştırmalarımda tamamen dinamik bir filtreleme sistemi bulamadım dedim ki yazmak gerek ve yazdım. Sonuçta ortaya böyle bir şey çıktı.

Gerekli olan : Prototype JavaScript framework, version 1.6.0.2

Kod :

  1.  
  2.  
  3.    if ( typeof(My) === 'undefined' ) {
  4. 		My = new Object();
  5. 	}
  6.    My.Mask = {
  7. 		install:function() {
  8. 			var elements = $$('input[mask]');
  9. 			elements.each(function(item) {
  10. 				 Event.observe(item, 'keypress',My.Mask.setMask.bindAsEventListener(item), true);
  11. 			});
  12. 		},
  13. 		mask:{
  14. 				format:'',
  15. 				regex:''
  16. 			},
  17. 		setMask:function(event) {
  18. 			var mask_code 	= this.readAttribute("mask");
  19. 			var mask_sys 	= mask_code.split("|");
  20. 			var mask = My.Mask.mask;
  21. 			mask.format = mask_sys[1].replace(/#/g,' ');
  22. 			if(mask_sys[0] == "number") {
  23. 				mask.regex = /\d/;
  24. 			}else if(mask_sys[0] == "all") {
  25. 				mask.regex = /\w/;
  26. 			}else if(mask_sys[0] == "char") {
  27. 				mask.regex = /[a-zA-Z]/;
  28. 			}
  29.  
  30. 			var keyCode = My.Mask.getKeyPress(event);
  31.  
  32. 			if(My.Mask.notChar(keyCode)) {
  33. 				var chr 	= String.fromCharCode(keyCode);
  34. 	            var strng 	= this.value + chr;
  35. 	            var pos     = strng.length;
  36. 	            if ( mask.regex.test(chr) && pos <= mask.format.length ) {
  37. 	               if ( mask.format.charAt(pos - 1) != ' ' ) {
  38. 	                  strng = this.value + mask.format.charAt(pos - 1) + chr;
  39. 	               }
  40. 	               this.value = strng;
  41. 	            }
  42. 	           Event.stop(event);
  43. 			}
  44.  
  45. 		},
  46. 		getKeyPress: function(e) {
  47. 	      return window.event ? window.event.keyCode
  48. 	           : e            ? e.which
  49. 	           :                0;
  50. 	    },
  51. 		notChar: function(key) {
  52. 			return ( key >= 32 && key < 127 );
  53. 		}
  54.    }
  55.  

Örnek Kullanım:

Body tagı :

 
 
<body onload="My.Mask.install()" >
 

Input tagı :

 
<input id="input_time" type="text" mask="number|+##(###)###-####" />
 
convert this post to pdf.
Previous Entries
WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Login