เทคนิค...การทำให้ Textbox กรอกหรือป้อนได้เฉพาะตัวเลขด้วย Javascript ง่ายๆ
หลาย ๆ คนคงอาจจะเคยเจอกันแล้ว และหากเป็นคนที่ไม่ยอมแพ้ก็คงจะค้นในใน google จนเจอและแก้ไขผ่านไปได้เรียบร้อยแล้ว
ผมเองก็เช่นกัน ความรู้มันมีอยู่ในเน็ต แค่ค้นหาเราก็เจอ วันนี้จึงขอเอามาลงไว้เผื่อจะได้ใช้หรือเปิดดูได้ง่าย ๆ
และถือโอกาสแบ่งปันไว้ได้สำหรับผู้ที่กำลังหาวิธีอยู่
เท่าที่ลองค้นหาดู ก็มีหลายแบบหลายสไตล์ แล้วแต่เทคนิคของใครของมัน
มาลองดูกันเลยดีกว่าครับ
อันนี้เพ่ิ่มเติมนะครับมาใหม่ใช้ฟังก์ชั่น isNaN สั้น ๆ ง่าย ๆ ไม่ยุ่งยากอีกต่อไป (ลอดูครับ)
ผมเองก็เช่นกัน ความรู้มันมีอยู่ในเน็ต แค่ค้นหาเราก็เจอ วันนี้จึงขอเอามาลงไว้เผื่อจะได้ใช้หรือเปิดดูได้ง่าย ๆ
และถือโอกาสแบ่งปันไว้ได้สำหรับผู้ที่กำลังหาวิธีอยู่
เท่าที่ลองค้นหาดู ก็มีหลายแบบหลายสไตล์ แล้วแต่เทคนิคของใครของมัน
มาลองดูกันเลยดีกว่าครับ
อันนี้เพ่ิ่มเติมนะครับมาใหม่ใช้ฟังก์ชั่น 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='')
เคดิต : http://www.code-father.com
สมัครสมาชิก:
ส่งความคิดเห็น
(
Atom
)
ไม่มีความคิดเห็น :
แสดงความคิดเห็น