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

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

PHP CODE FATHER โปรแกรมช่วยสร้างโค้ด โปรเจ็ค PHP+MySQL+Boostrap ใช้งานง่าย ๆ


หลาย ๆ คนคงอาจจะเคยเจอกันแล้ว และหากเป็นคนที่ไม่ยอมแพ้
ก็คงจะค้นในใน 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 หรือไม่

ถ้าใช่ก็แสดงว่าผู้ใช้กดปุ่มตัวอักษรอยู่ แต่ถ้าไม่ใช่ก็แสดงว่าผู้ใช้กดปุ่มตัวเลขนั่นเอง

ยิ่งอธิบายก็ยิ่งจะงงกันเข้าไปใหญ่ โค้ดสั้น ๆ อธิบายซะยากเลย

ลองเอาไปลองใช้กันดูครับ ชอบแบบไหนก็ตามใจชอบเลย...

ย้อนกลับ กลับหน้าแรก