หลาย ๆ คนคงอาจจะเคยเจอกันแล้ว และหากเป็นคนที่ไม่ยอมแพ้ก็คงจะค้นในใน 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 หรือไม่
ถ้าใช่ก็แสดงว่าผู้ใช้กดปุ่มตัวอักษรอยู่ แต่ถ้าไม่ใช่ก็แสดงว่าผู้ใช้กดปุ่มตัวเลขนั่นเอง
ยิ่งอธิบายก็ยิ่งจะงงกันเข้าไปใหญ่ โค้ดสั้น ๆ อธิบายซะยากเลย
ลองเอาไปลองใช้กันดูครับ ชอบแบบไหนก็ตามใจชอบเลย...