เวลาเขียนโปรแกรมนี่สิ่งหนึ่งที่ต้องทำเป็นประจำเลยก็คือ เช็กความถูกต้องของข้อมูลที่ป้อนในฟอร์ม เป็นงานที่โปรแกรมเมอร์มือเก๋า เบื่อหน่ายกันยิ่งนัก จะไม่ตรวจสอบความถูกต้องเลยก็ไม่ได้
เพราะในบางครั้งเราอุตส่าเขียนข้อความชี้แจงไว้ท้ายกล่องเท็กบ้อก ว่าให้ป้อนเฉพาะตัวเลข ไม่วายที่ยูสเซอร์จะใจดี ป้อนเครื่องหมายคั่นหลักพันมาให้ด้วย (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
ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ
minddezign says:
30/10/2552 at 30/10/2552
แจ๋วเลยครับ
minddezign says:
30/10/2552 at 30/10/2552
แต่มันยังป้อนภาษาไทยได้อยู่ครับ
minddezign says:
30/10/2552 at 30/10/2552
อ๋อ รู้แหล่ะครับว่าไม่ให้ป้อนภาษาไทยได้ครับ
kongtoonarmy says:
30/10/2552 at 30/10/2552
ทำอย่างไรไม่ให้ป้อนภาษาไทยได้ด้วยครับ
Anonymous says:
19/01/2553 at 19/01/2553
<input name=”idcard” type=”text” onchange=”return check_idcard(this.value)” size=”13″ maxlength=”13″ class=”inputbox” id=”idcard”
onkeypress=”if (event.keyCode < 48 || event.keyCode > 57){ alert(‘ใช้ได้แต่ตัวเลขเท่านั้น’); event.returnValue = false;}”
onkeydown=”if (event.keyCode == 17) alert(‘ไม่อนุญาตให้ทำการ Paste’);” onmousedown=”if (event.button == 2) { alert(‘ไม่อนุญาตให้ทำการ Paste’); this.value=”; }”
onpaste=”return true;” ondrop=”return false;” />
compk says:
29/11/2554 at 29/11/2554
เพิ่มให้เช็คภาษาไทยด้วย