ผมทำงานบน App Training Logger เป็น Side-project 6 เดือนที่ผ่านมา ตามคาด ต้องการ Numeric Inputs
เวลาใช้ Autocomplete ใน Code Editor ค่า Default ของ Input Element คือ Text:
<input type="text" />HTML Input Element ที่ Type เป็น Number รับเฉพาะตัวเลข ลองพิมพ์ตัวอักษรในช่องนี้:
ไม่ได้
HTML Input Element Type Text รับทั้งตัวอักษรและตัวเลข ลองพิมพ์ทั้งสองในช่อง Text:
Yay, it works!
ตอนแรกประกาศ Input สำหรับ Reps และ Weight ใน App ไม่ได้เปลี่ยน Default Type จาก Text เป็น Number ไม่ได้คิดถึง ตอนทดสอบบน Desktop พิมพ์ตัวเลขง่าย ไม่เป็นปัญหา
แต่ทดสอบบน iPhone 6 ทันทีเข้าใจว่าทำไมควรใช้ Input Type ถูกต้องตั้งแต่ต้น
ถ้า Input Type เป็น Text และคลิกช่องนั้น iPhone (น่าจะเหมือน Android) จะโชว์ Native Keyboard เหมือนพิมพ์ข้อความ:
แบบนี้:
Keyboard นี้มีตัวเลข แต่ต้องกดปุ่ม 123 ก่อน เพิ่ม Step ไม่จำเป็น
สำหรับช่อง Input ที่วัตถุประสงค์คือกรอกจำนวน Reps และ Weight ใช้ Numeric Keyboard บน Smartphone ถูกต้องกว่า
ทำได้โดยระบุว่า Input Element รับ Numeric Input:
แบบนี้:
<input type="number" />ผลลัพธ์ (บน iOS):
แค่นี้ก็จบ!
