ถ้าท่านเคยใช้ VB ท่านน่าจะคุ้นเคยกับ Masked Edit box (ขออภัย ถ้าจำชื่อผิด ไม่ได้จับเสียนานแล้ว) ตัว Masked Input จะทำหน้าที่เหมือนกับเหมือนกันกับ Masked Edit box

คือจะทำหน้าที่บังคับยูสเซ่อร์ ให้ป้อนข้อมูลด้วยรูปแบบ ที่ถูกต้องและเราต้องการ โดยปกติแล้ว html นั้นถ้าจะบังคับป้อนข้อมูลให้ตรงกับรูปแบบที่เราต้องการ เราก็จะต้องชี้แจงกันอย่างละเอียด “ป้อนตัวเลขสองตัวแล้วขีดตามด้วยตัวเลขอีกสี่ตัวนะ” ซึ่งบางทียูสเซ่อขี้เกียจกดแป้น – ทำให้เราได้ข้อมูลที่ผิดรูปแบบอยู่เรื่อย หรือไม่งั้นเราให้ป้อนตัวเลขเท่านั้น ดันไปป้อน ค.ควาย มาซะงั้น อย่ากระนั้นเลย ใช้ปลั๊กอินตัวนี้เถอะครับ ชีวิตจะได้ง่ายขึ้น โปรแกรมเมอร์ก็จะได้ไม่ต้องเป็นศรัตรูกับพนักงานในบริษัท มากนัก

jquery - Masked Input

Download | Demo

วิธีการใช้งาน

1. include Jquery และ maskedinput เข้ามาในส่วน <head>

1
2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.2.1.js"></script>

2. ฟอร์ม พร้อม Textbox

1
2
3

<form action="" method="get">
    <input id="mobile" name="mobile" />
</form>

3. Javascript เปลี่ยนเท็กบ้อกธรรมดา ให้เป็น Masked Edit

1
2
3
4
5
6
7

<script type="text/javascript">
$(document).ready(function(){
 
	$("#mobile").mask("999-9999-999");
 
})
</script>

#mobile คือ id ของช่องป้อนข้อมูลที่ต้องการแปลง
พารามิเตอร์ที่ส่งเข้าไปใน .mask()ก็คือรูปแบบที่เราต้องการบังคับให้ป้อนในช่องป้อนข้อมูล

  • a – ป้อนได้เฉพาะตัวหนังสือ (A-Z,a-z)
  • 9 – ป้อนได้เฉพาะตัวเลข (0-9)
  • * – ป้อนได้ (A-Z,a-z,0-9) ทั้งตัวหนังสือและตัวเลข

โชคร้ายนิดหน่อยตรงที่ว่า ไม่สามารถบังคับตัวอักษรหรือตัวเลข ที่เป็นภาษาไทย ถ้าท่านใดนำปลั๊กอินตัวนี้ ไปแก้ไข ให้สามารถซัพพอร์ต ภาษาไทย ช่วยบอกด้วยนะครับ

4.โค้ดทั้งหมด

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.2.1.js"></script>
<title>Masked Input</title>
<script type="text/javascript">
$(document).ready(function(){
 
	$("#mobile").mask("999-9999-999");
 
})
</script>
</head>
 
<body>
<form action="" method="get">
    <input name="mobile" id="mobile" type="text" value="" />
</form>
</body>
</html>

อีกอย่างที่จะกล่าวทิ้งท้ายก็คือ ปลั๊กอินของ jquery แต่ละตัวนั้น ถ้าท่านต้องการปรับแต่งมันเพิ่มเติม มันก็มีวิธีให้ปรับแต่งนะครับ อีกทั้งปลั๊กอินบางตัว ยังมี optional ให้ใช้งาน ซึ่งท่านสามารถดูได้จากเว็บ เจ้าของปลั๊กอิน

ที่ผมนำเสนอ จะเป็นแบบ ใช้ง่ายที่สุดและจะไม่ปรับแต่งอะไรเลย เรียกว่าให้มาไง ก็ใช้กันอย่างนั้น

แหล่งเรียนรู้เพิ่มเติม

http://digitalbush.com/projects/masked-input-plugin/

jQuery Masked Input
Avatar

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

Programmer, Blogger

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