#เทคนิค...การทำให้ Textbox กรอกหรือป้อนได้เฉพาะตัวเลขด้วย Javascript ง่ายๆ
หลาย ๆ คนคงอาจจะเคยเจอปัญหานี้กันแล้วใช่ไหมครับ (ไม่อย่างนั้นคงไม่มาค้นหาวิธีแก้กันหรอกเนาะ อิอิ) ในฐานะที่เราเป็นคนพัฒนาระบบให้ผู้ใช้ (ซึ่งใช้ไม่ค่อยจะเป็นกัน ช่องตัวเลขก็กรอกตัวอักษร ช่องตัวหนังสือ ก็กรอกตัวเลข) ทำให้ในหลาย ๆ กรณี ระบบหรือโปรแกรมที่เราพัฒนามาอย่างดี (เทสด้วยตัวเอง) ไม่เคยมีบัค แต่พอผู้ใช้งานใช้จริงหรือ ลองใช้เท่านั้นล่ะ ไม่รู้ว่าบัค เออเร่อมันมาจากไหน เยอะแยะมากมาย
จนต้องมาหาวิธีแก้ไข เพื่อป้องกันการคีย์หรือกรอกข้อมูลผิดประเภทของลูกค้าอินดี้ ๆกัน และหากใครเป็นคนที่ใฝ่ศึกษาหาความรู้ ไม่ยอมแพ้อะไรง่าย ๆ ก็คงจะค้นในใน google จนเจอและแก้ไขผ่านไปได้เรียบร้อยแล้ว ผมเองก็เช่นกัน ความรู้มันมีอยู่ในเน็ต แค่ค้นหาเราก็เจอ วันนี้จึงขอเอามาลงไว้เผื่อจะได้ใช้หรือเปิดดูได้ง่าย ๆและถือโอกาสแบ่งปันไว้ได้สำหรับผู้ที่กำลังหาวิธีอยู่
เท่าที่ลองค้นหาดู ก็มีหลายแบบหลายสไตล์ แล้วแต่เทคนิคของใครของมัน มาลองดูกันเลยดีกว่าครับ
อันนี้เพิ่มเติมนะครับมาใหม่ใช้ฟังก์ชั่น isNaN สั้น ๆ ง่าย ๆ ไม่ยุ่งยากอีกต่อไป (ลอดูครับ)
**********************************************************************
กรอกได้เฉพาะตัวเลข
<input type="text" name="text_plain" onKeyUp="if(isNaN(this.value)){ alert('กรุณากรอกตัวเลข'); this.value='';}"/>
กรอกได้เฉพาะตัวอักษร
<input type="text" name="text_key" onKeyUp="if(!(isNaN(this.value))) { alert('กรุณากรอกอักษร'); this.value='';}"/>
**********************************************************************
1.อันนี้แบบที่ผมใช้อยู่ (ในโปรแกรม PHP Code Father ก็เช่นกัน)
<input name='s_money' id='s_money' type='text' size='10' onKeyUp="if(this.value*1!=this.value) this.value='' ;" >
อธิบายขยายความกันสักหน่อย
onKeyUp="if(this.value*1!=this.value) this.value='' ;"
onKeyUp คือ เหตุการณ์เมื่อมีการพิมพ์ตัวอักษรหรือตัวเลขใด ๆ (กดลงไปและปล่อยปุ่มนั้น ๆ )
this.value คือ ค่าของ Textbox ณ ปัจจุบัน เช่น เมื่อเราพิมพ์ "5" ค่า this.value ก็จะเท่ากับ "5" นั่นเอง
this.value*1 คือ เอาค่าที่ผู้ใช้ป้อนมา "คูณ" ด้วย 1 หากผู้ใช้ป้อนตัวเลข ผลลัพท์ที่ได้ก็จะมีค่าเป็นค่าที่ผู้ใช้ป้อน เช่น ป้อน "5"
ก็จะเป็น 5*1=5 นั่้นเอง ทำให้รู้ว่าผู้ใช้ป้อนตัวเลขหรือเปล่า แต่ถ้าหากผู้ใช้ป้อนตัวอักษรหรือตัวหนังสือ เช่น "ส" เมื่อเอา "ส" คูณ 1 ก็จะได้ค่าที่ไม่เท่ากับ "ส"
สรุปคำสั่งโดยรวมคือ onKeyUp="if(this.value*1!=this.value) this.value='' ;"
- ในเหตุการที่ผู้ใช้ป้อนหรือพิมพ์ตัวอักษรใด ๆ เข้ามาใน Textbox
- นำค่าที่ผู้ใช้ป้อนมา "คูณ" ด้วย 1
- นำค่าจาก 2. ไปเปรียบเทียบกับค่าที่ผู้ใช้ป้อนเข้ามาว่าเท่ากันหรือไม่
- ถ้าไม่เท่ากับค่าที่ผู้ใช้ป้อนเข้ามา ก็ทำการล้างค่าที่อยู่ใน Textbox ให้เท่ากับ "" (this.value='')
**********************************
2.อีกรูปแบบนึ่งครับ ชอบแบบไหนก็เลือกเอาไปใช้กันได้ตามสบาย ตามสไตล์
script language="javascript">
function CheckNum(){
if (event.keyCode < 48 || event.keyCode > 57){
event.returnValue = false;
}
}
</script>
<input type="text" name="s_money" size="10" onKeyPress="CheckNum()" style="text-align:right">
onKeyPress="CheckNum()" อันนี้ใช้เหตุการเมื่อมีการกดปุ่มใด ๆ ที่อยู่ในคีย์บอร์ด ก็จะส่งค่าเหตุการ event
ไปที่ฟังก์ชั่น CheckNum() เพื่อทำการตรวจสอบค่า
event.keyCode < 48 || event.keyCode > 57 ตรงนี้เป็นการตรวจเช็คค่าจาก keyCode คือ ปุ่มทุกปุ่มบนคีย์บอร์ด
ที่มีค่ารหัสตัวเลข หรือที่เรียกกันว่า KeyCode นั่นเอง และกลุ่มตัวเลขที่ใช้แทนค่าตัวเลข 1 ถึง 9 นั้น จะมีรหัสตัวเลขอยู่ระหว่าง 48 ถึง 57 ดังนี้ครับ
0 = 48
1 = 49
2 = 50
3 = 51
4 = 52
5 = 53
6 = 54
7 = 55
8 = 56
9 = 57
if (event.keyCode < 48 || event.keyCode > 57){ คำสั่งนี้ก็การเช็คว่า รหัสตัวเลขของปุ่มที่กดลงมานั้น น้อยกว่า 48 หรือ มากกว่า 57 หรือไม่ ถ้าใช่ก็แสดงว่าผู้ใช้กดปุ่มตัวอักษรอยู่ แต่ถ้าไม่ใช่ก็แสดงว่าผู้ใช้กดปุ่มตัวเลขนั่นเอง ยิ่งอธิบายก็ยิ่งจะงงกันเข้าไปใหญ่ โค้ดสั้น ๆ อธิบายซะยากเลย ลองเอาไปลองใช้กันดูครับ ชอบแบบไหนก็ตามใจชอบเลย..
ขอบคุณทุกท่านที่แวะเข้ามาเยี่ยมชมเว็บไซต์ของเรา หวังว่าบทความนี้จะเป็นประโยชน์กับหลาย ๆ ท่านที่กำลังหาวิธีแก้ไขปัญหาการกรองข้อมูลลงใน Textbox หรือ Input Box กันนะครับ
www.code-father.com
Tag!
#JavaScript แสดงค่า textbox #
Textbox รับค่าเฉพาะ ตัวเลข #
Textbox ใส่ เฉพาะตัวเลข javascript #
Input type ตัวเลข #
Textbox ใส่ เฉพาะตัวเลข html #
JavaScript ทศนิยม 2 ตำแหน่ง #
jQuery กรอก เฉพาะ ตัวเลข #
ทศนิยม 2 ตํา แห น่ ง HTML #
textbox ใส่เฉพาะตัวเลข javascript #
Textbox ใส่ เฉพาะ ตัวเลข #
Textbox ใส่ เฉพาะ ตัวเลข vba #
เช็ค ค่า ว่าง Textbox C #
TextBox รับค่า เฉพาะ ตัวเลข vba #
C แสดง ข้อมูลใน TextBox #
กรอกได้เฉพาะตัวเลข #
โค้ด ใส่ เฉพาะ ตัวเลข #
Javascript กรอกเฉพาะ ตัวเลข เท่านั้น #
แปลง ตัวแปร javascript เป็น php #
PHP กรอก เฉพาะตัวเลข #
Java ใส่ เฉพาะ ตัวเลข #
การ ตรวจ สอบ การกรอกค่า ตัวเลข เกิน กำหนด PHP #
HTML input ตัวเลข #
jquery กรอกเฉพาะ ตัวเลข #
ปุ่ม เพิ่ม ลด จำนวน html #
PHP รับค่าจาก textbox #
PHP ใส่ ได้เฉพาะ ตัวเลข #
php บังคับ กรอกข้อมูล #
Javascript กรอก เฉพาะตัว อักษร เท่านั้น #
TextBox รับค่า เฉพาะ ตัวเลข C #
รับค่าจาก Textbox C #
Excel กรอก เฉพาะ ตัวเลข #
html กรอกได้เฉพาะตัวเลข #
TextBox ใส่ เฉพาะ ตัวเลข C #
Input type=number ทศนิยม