jQuery Plugin : กรอกเฉพาะตัวเลข

ห่างหายไปนานเนื่องจากสถานการณ์การเมือง การงาน (อ้างเล็กน้อย) พอดีมีงานที่ต้องการให้ User กรอกข้อมูลได้เฉพาะตัวเลข และ จัด รูปแบบหลักพันให้เลย (เรียกไม่ค่อยถูก) ซึ่งมันค่อนข้างยากเหมือนกันในการป้องกัน ก็เลยลองๆดู jQuery พระเอกคนเก่งของเรา ซึ่งก็ลองๆเขียน Plugin ขึ้นมาดังนี้

(function($) {
	/** +++++ function formatCurrency +++++ */
	$.fn.formatCurrency = function(options) { 
		var defaults = {
			splitChar : ',',
			allowChar : '0123456789.-',
			splitLen : 3
		};
		
		var opts = $.extend(defaults, options);
		return this.each(function(){
			//When Press Keyboard
			$(this).keypress(function(e){
				//Allow enter, backspace,delete 
				if(e.which == 13 || e.which == 8 || e.which==0) { 
					return true; 
				}
				//Disable ctrl,alt key 
				if(e.ctrlKey || e.altKey) { 
					return false; 
				} 
				
				var ch = String.fromCharCode(e.which);
				if(ch == "-"){
					var value = $(this).val();
					if(value.lastIndexOf("-") > 0) return false;
				}
				return opts.allowChar.indexOf(ch) > -1; 
			});
			//When Up keyboard
			$(this).keyup (function(e){
				var value = $(this).val();
				var subChar = "";
				value = value.replace(/,/gi,"");
				if(value.indexOf("-") >= 0){
					value = value.replace(/-/gi,"");
					subChar = "-";
				}
				//Split Decimals
				var arrs = value.toString().split(".");
				//Split data and reverse
				var revs = arrs[0].split("").reverse().join("");
				var len = revs.length;
				var tmp = "";
				for(i = 0; i < len; i++){
					if(i > 0 && (i%opts.splitLen) == 0){
						tmp += opts.splitChar + revs.charAt(i);
					}else{
						tmp += revs.charAt(i);
					}
				} 
				
				//Split data and reverse back
				tmp = tmp.split("").reverse().join("");
				if(arrs.length > 1 && arrs[1] != undefined){
					tmp += "."+ arrs[1];
					tmp = subChar+tmp;
				}else{
					tmp = subChar+tmp;
				}
				
				$(this).val(tmp);
			});
		});
	};
})(jQuery);


ทดลองใช้งานดังนี้

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.common.util.js"></script>
<script type=text/javascript>
$(document).ready(function() {
	//look class att
	$('.currency').formatCurrency();
	//look id att
	$('#data4').formatCurrency();
	$('#data5').formatCurrency();
 });
</script>
</head>
<body>
Using class <br/>
<input type="text" name="data1" id="data1" class="currency" /><br/>
<input type="text" name="data2" id="data2" class="currency" /><br/>
<input type="text" name="data3" id="data3" class="currency" /><br/>
<br/>
Using id <br/>
<input type="text" name="data4" id="data4" /><br/>
<input type="text" name="data5" id="data5" />
</body>
</html>

จาการทดลองใช้งานคิดว่ายังไม่สมบูรณ์มากนัก เช่นกรอกข้อมูลมาแบบ 002899 จะ จัดรูปแบบเป็น 002,899 ซึ่งควรเหลือแค่ 2,899 หรือบางครั้งมีการ reload หน้าจอทำให้สามารถกรอกตัวอักษร หรือ ข้อมูลอื่นๆได้ ที่สามารถทำได้ตอนนี้คือ สามารถกรอกเครื่องหมาย “-” ได้เฉพาะหน้าสุดเท่านั้น ไม่สามารถ copy & paste ได้ ใครมีตัวอย่าง หรือ เขียนได้ดีกว่านี้ก็มาแชร์กันได้ครับ

ป.ล ก่อนที่จะเขียนเองก็ลองไปหา ข้อมูลและ plugin ที่คนอื่นเขียนไว้แล้ว ซึ่งบางตัวใช้งานได้ดี แต่ติดปัญหาเวลาเปลี่ยน keyboard จากภาษาอังกฤษ มาเป็นไทย แล้วสามารถกรอกได้ (เพราะส่วนมากคนเขียน plugin นี่ฝรั่งนี่)
อ้างอิง และ แหล่งข้อมูลจาก
http://php.deeserver.net
How To Develop a jQuery Plugin

  1. หายไปนานเลยนะครับ ผมรอติดตามอยู่ อิอิ
    คงดีไม่น้อยถ้าได้มีโอกาศร่วมงานกับพี่นะครับ

  2. การงานมันรุ่ง (เอ้ย ยุ่ง) ครับและบวกกับความขี้เกียจโดยกมลสันดานด้วย นั่งๆนอนๆมานาน

  1. No trackbacks yet.