เทคนิค...การทำให้ Textbox กรอกหรือป้อนได้เฉพาะตัวเลขด้วย Javascript ง่ายๆ

แชร์ประสบการณ์เขียนโค้ด php + Mysql เล็ก ๆ น้อย ๆ เผื่อจะเป็นประโยชน์กับใครสักคน...
 
หลาย ๆ คนคงอาจจะเคยเจอปัญหานี้กันแล้วใช่ไหมครับ (ไม่อย่างนั้นคงไม่มาค้นหาวิธีแก้กันหรอกเนาะ อิอิ) ในฐานะที่เราเป็นคนพัฒนาระบบให้ผู้ใช้ (ซึ่งใช้ไม่ค่อยจะเป็นกัน ช่องตัวเลขก็กรอกตัวอักษร ช่องตัวหนังสือ ก็กรอกตัวเลข) ทำให้ในหลาย ๆ กรณี ระบบหรือโปรแกรมที่เราพัฒนามาอย่างดี (เทสด้วยตัวเอง) ไม่เคยมีบัค แต่พอผู้ใช้งานใช้จริงหรือ ลองใช้เท่านั้นล่ะ ไม่รู้ว่าบัค เออเร่อมันมาจากไหน เยอะแยะมากมาย
 
จนต้องมาหาวิธีแก้ไข เพื่อป้องกันการคีย์หรือกรอกข้อมูลผิดประเภทของลูกค้าอินดี้ ๆกัน และหากใครเป็นคนที่ใฝ่ศึกษาหาความรู้ ไม่ยอมแพ้อะไรง่าย ๆ ก็คงจะค้นในใน 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='' ;"
  1. ในเหตุการที่ผู้ใช้ป้อนหรือพิมพ์ตัวอักษรใด ๆ เข้ามาใน Textbox
  2. นำค่าที่ผู้ใช้ป้อนมา "คูณ" ด้วย 1
  3. นำค่าจาก 2. ไปเปรียบเทียบกับค่าที่ผู้ใช้ป้อนเข้ามาว่าเท่ากันหรือไม่
  4. ถ้าไม่เท่ากับค่าที่ผู้ใช้ป้อนเข้ามา ก็ทำการล้างค่าที่อยู่ใน 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
 
 
#โค้ด textbox ใส่ได้เฉพาะตัวเลข javascript    #วิธีทำให้ textbox กรอกได้เฉพาะตัวเลข php    #ทำอย่างไรให้ textbox java script ใส่เฉพาะตัวเลข    #แนวทางการเขียนโค้ดให้ textbox ใส่เฉพาะตัวเลข c#    #เขียนโค้ด html input ได้เฉพาะตัวตัวเลข    #วิธีจำกัดการกรอกหรือป้อนข้อมูล เฉพาะตัวเลข php    #โค้ดง่ายๆ javascript กรอกเฉพาะตัว อักษรเท่านั้น    #เทคนิคง่ายๆ ให้ javascript php รับค่าเฉพาะตัวเลข


My Article
แนะนำเว็บสูตรหวยออนไลน์ ดูฟรี