ผมได้เขียนอธิบายวิธีการใช้งานปลักอินตัวนี้ไว้แล้วครั้งหนึ่งที่ http://www.select2web.com/jquery/jquery-masked-input-plugin.html

จากประสบการณ์การทำงาน เรื่องรูปแบบของข้อมูลนำเข้านี่ ถ้าเราต้องการจะให้เป็นไปอย่างที่ต้องการจริงๆ จะต้องบังคับรูปแบบเลยครับ แค่ขอร้องนั้นไม่พอ มีครั้งหนึ่งที่ผมเขียนฟอร์มมีช่องให้ป้อนเวลา ด้วยความขี้เกียจผมไม่ได้เขียนโค้ดบังคับรูปแบบ
เพียงแค่เขียนไว้ข้างๆช่องรับข้อมูลว่า “กรุณาป้อนตามรูปแบบ 00:00 เช่น 15:30” ปรากฎว่าข้อมูลที่ได้มานั้นเป็น 15.00,7:5,15.00 AM มั่วไปหมด จะไปโทษผู้ป้อนข้อมูลไม่ได้ครับ เพราะบางทีเขาก็ป้อนตามรูปแบบที่เขาคุ้นชิน ฉะนั้นต้องบังคับรูปแบบ
สถานเดียวถ้าไม่อยากได้ข้อมูลที่หลากหลายฟอร์แมต

Masked Input มันเป็นปลักอินของ jQuery ที่จะช่วยบังคับการป้อนข้อมูลให้เป็นไปตามรูปแบบที่เราต้องการ มาดูวิธีใช้งานครับ

1. ดาวน์โหลด Masked Input ตัว Uncompressed หรือ Minified ก็ได้

2. include jQuery และMasked Input เข้ามาในไฟล์ ผมใช้ไฟล์ jQuery จากกูเกิล CDN จะได้ไม่ต้องโหลดมาเก็บไว้ในเครื่อง

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.3.js"></script>

3. สร้างฟอร์มและเท็กบ้อก id=”time”

<form id="form1" name="form1" method="post" action="">
  <label for="time">เวลา : </label>
  <input type="text" name="time" id="time" />
</form>

4. เขียนโค้ดเรียกใช้ปลักอิน Masked Input

<script type="text/javascript">
$(document).ready( function(){
	$.mask.definitions['2']='[012]';
	$.mask.definitions['3']='[0123456789]';
	$.mask.definitions['5']='[012345]';
	$.mask.definitions['9']='[0123456789]';	
	$('#time').mask('23:59');
});
</script>

mask.definitions เป็นการนิยามตัวมาร์คขึ้นมาใหม่ตามใจเรา โดยผมกำหนดให้

เลข 2 มีค่าความเป็นไปได้ที่สามารถป้อนได้คือ 012
เลข 3 มีค่าความเป็นไปได้ที่สามารถป้อนได้คือ 0123456789
เลข 5 มีค่าความเป็นไปได้ที่สามารถป้อนได้คือ 012345
เลข 9 มีค่าความเป็นไปได้ที่สามารถป้อนได้คือ 0123456789

จะเห็นว่าเลข 3 และ 9 มีค่าความเป็นไปได้เหมือนกัน เหตุที่ผมนิยาม 9 ขึ้นมาใหม่ทั้งที่สามารถใช้ 3 แทนได้ เพราะผมอยากจะให้ตอนเรียกใช้ฟอร์แมต .mask(’23:59′); มันเป็นธรรมชาติของเวลา มองโค้ดแล้วสวยดี

โค้ดทั้งหมดจะเป็นดังนี้

<!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>Marked Input Box</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.3.js"></script>
<script type="text/javascript">
$(document).ready( function(){
	$.mask.definitions['2']='[012]';
	$.mask.definitions['3']='[0123456789]';
	$.mask.definitions['5']='[012345]';
	$.mask.definitions['9']='[0123456789]';	
	$('#time').mask('23:59');
});
</script>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
  <label for="time">เวลา : </label>
  <input type="text" name="time" id="time" />
</form>
</body>
</html>

ผลลัพธ์ออกมาดังภาพ

ลองเขียนดูครับ ติดขัดตรงไหนถามได้ หวังว่าจะเป็นประโยชน์นะครับ

มีบทความที่ผ่านมา เจอคนมาคอมเม้นท์ผมว่า “มั่วหรือเปล่าไม่เห็นจะได้” ผมขอยืนยันครับว่าบทความที่ผมเขียนขึ้นมาทุกบทความ ผมทดสอบโค้ดแล้วว่าใช้งานได้จริง สามารถรันได้ บทความผมก็เขียนขึ้นมาเอง ไม่ได้ไปแปลมาจากไหน ฉะนั้นขอให้มั่นใจครับว่าบทความทุกบทความในเว็บแห่งนี้ สามารถใช้งานได้จริง
ติดปัญหาตรงไหนคอมเม้นท์ถามกันมา เพื่อนในนี้เยอะ ยินดีช่วยกันตอบเต็มที่อยู่แล้ว

ท่านสามารถอ่านวิธีการใช้งานปลักอิน Masked Input เพิ่มเติมได้ที่ http://digitalbush.com/projects/masked-input-plugin/

Marked Input Box Masked Input plugin
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ