input text ใส่ได้แต่ตัวเลขอย่างเดียวทำยังไง HTML5

ถ้าเราต้องการให้ input text ของ HTML5 สามารถใส่ได้แค่ตัวเลขอย่างเดียว ให้ใช้ input number แทนซึ่งเป็นคุณสมบัติของภาษา HTML5 สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง

<input type="number">

input number มี Attribute ที่สำคัญ 3 อย่างคือ any, max, min โดยทั้ง 3 Attribute จะเกี่ยวข้องกับตัว Spinner (ปุ่มบวก-ลบ) โดยมีรายละเอียดดังนี้

1. max คือ ค่ามากสุดที่สามารถกดบวกได้

2. min คือ ค่าน้อยสุดที่สามารถกดลบได้

3. any คือ จำนวนการบวกขึ้น และลบลง ต่อผู้ใช้งานกด 1 ครั้ง

ตัวอย่าง สมมุติให้ input number นี้สามารถกดบวกค่ามากสุดได้ 10, กดลบน้อยสุดได้ 1 และตัวเลขขยับทีละ 2 (ทั้งบวก และลบ) สามารถเขียนโปรแกรมได้แบบนี้

<input type="number" min="1" max="10" step="2">

ตัวอย่าง กรณีต้องการนำ Spinner (ปุ่มบวก-ลบ) ออกจาก input number ให้ใช้ CSS

<style>
input[type=number] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
</style>

<input type="number">