เวลาเขียนโปรแกรมนี่สิ่งหนึ่งที่ต้องทำเป็นประจำเลยก็คือ เช็กความถูกต้องของข้อมูลที่ป้อนในฟอร์ม เป็นงานที่โปรแกรมเมอร์มือเก๋า เบื่อหน่ายกันยิ่งนัก จะไม่ตรวจสอบความถูกต้องเลยก็ไม่ได้
เพราะในบางครั้งเราอุตส่าเขียนข้อความชี้แจงไว้ท้ายกล่องเท็กบ้อก ว่าให้ป้อนเฉพาะตัวเลข ไม่วายที่ยูสเซอร์จะใจดี ป้อนเครื่องหมายคั่นหลักพันมาให้ด้วย (25,000)
ครั้นพอเราบอกว่าเอางี้ละกันงั้น ให้ป้อนเครื่องหมายคั่นหลักพันมาให้ด้วย ก็ไม่วายอีกที่ยูสเซอร์บางคนเขาไม่ชอบป้อนเครื่องหมายคั่นหลักพัน เพราะโปรแกรมที่เขาใช้อยู่เป็นประจำไม่เห็นจะต้องป้อน มันเลยคุ้นเคย
ฮ่วย….
ผมไปเจอปลักอินของ jquery มาตัวหนึ่ง ตัวนี้มันจะป้องกันไม่ให้ยูสเซอร์พิมพ์ตัวหนังสือลงไปในช่องเท็กบ้อก อนุญาตให้พิมพ์ได้เฉพาะตัวเลข 0-9 เท่านั้น
ปลักอินตัวนี้ alphanumeric
สำหรับวิธีการใช้งานนั้นก็ง่าย ตามสไตล์ jquery
เขียนโค้ด
ก่อนอื่นต้องอินคลูดไฟล์ jquery กับ ปลักอิน alphanumeric เข้ามาก่อน
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.alphanumeric.js"></script> |
ดูก่อนว่าช่องที่ให้ป้อนได้เฉพาะตัวเลข id อะไร
<input name="price" type="text" id="price" /> |
ทำให้มันป้อนได้เฉพาะตัวเลขซะ
<script type="text/javascript"> $(document).ready(function(){ // เพียงสั้นๆแค่นี้แหละ $('#price').numeric(); }); </script> |
โค้ดทั้งหมดเป็นดังนี้
<!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>Allow Numeric</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.alphanumeric.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#price').numeric();
});
</script>
</head>
<body>
<input name="price" type="text" id="price" />
</body>
</html> |
ง่ายจนเหลือเชื่อ ปลั๊กอินตัวนี้ไม่ใช่จะสามารถเพียงเท่านี้นะครับ ในกรณีนอกจากจะให้ป้อนได้เฉพาะตัวเลขแล้ว ยังอยากจะให้ป้อน dot(.) ได้ด้วย เพราะบางครั้งมันเป็นตัวเลขติดเศษ
ท่านก็เพียงแค่เซตเพิ่มเติมเล็กน้อย โดยเพิ่ม allow เข้าไป ในเครื่องหมาย “” ท่านอยากจะอนุญาตอักขระอะไรบ้างก็ใส่เข้าไป “.,” เป็นต้น
$('#price').numeric({allow:"."}); |
ข้อมูลเพิ่มเติม : http://www.texotela.co.uk/code/jquery/
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
Programmer, Blogger
ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ
