ฉันกำลังฝึก คนตัดไม้ฝึกหัด แอปที่เป็นโปรเจ็กต์ย่อยในช่วง 6 เดือนที่ผ่านมา อย่างที่คุณคาดหวัง แอปดังกล่าวต้องการอินพุตที่เป็นตัวเลข
เมื่อคุณใช้การเติมข้อความอัตโนมัติในตัวแก้ไขโค้ดใดๆ ประเภทเริ่มต้นสำหรับองค์ประกอบอินพุตคือข้อความ:
<input type="text" />องค์ประกอบอินพุต HTML ที่มีประเภทของตัวเลขจะรับเฉพาะอินพุตที่เป็นตัวเลขเท่านั้น ลองพิมพ์ตัวอักษรในช่องป้อนตัวเลขนี้:
คุณทำไม่ได้
องค์ประกอบอินพุต HTML ที่มีประเภทของ ข้อความ อย่างไรก็ตาม ยอมรับทั้งข้อความและตัวเลข ลองพิมพ์ทั้งตัวเลขและตัวอักษรในช่องป้อนข้อความนี้:
เย้ ได้ผล!
ในตอนแรกที่ฉันประกาศอินพุตสำหรับจำนวนครั้งและน้ำหนักในแอป ฉันไม่ได้เปลี่ยนประเภทอินพุตเริ่มต้นจากข้อความเป็นตัวเลข ฉันไม่ได้คิดเกี่ยวกับมัน เมื่อทำการทดสอบบนคอมพิวเตอร์เดสก์ท็อป การพิมพ์ตัวเลขนั้นง่าย จึงไม่รบกวนฉัน
แต่ทันทีที่ฉันทดสอบแอปของฉันบน iPhone 6 ก็เห็นได้ชัดว่าเหตุใดคุณจึงอาจใช้ประเภทอินพุตที่ถูกต้องตั้งแต่เริ่มต้น
หากประเภทขององค์ประกอบการป้อนข้อมูลของคุณถูกตั้งค่าเป็นข้อความ และคุณคลิกที่ช่องป้อนข้อมูลนั้น อย่างน้อย iPhones (ฉันสงสัยว่าจะคล้ายกันใน Android) แป้นพิมพ์เนทีฟของคุณจะปรากฏขึ้น ราวกับว่าคุณกำลังเขียนข้อความถึงใครบางคน
ชอบสิ่งนี้:
ตอนนี้ แป้นพิมพ์เนทีฟนี้ให้คุณเข้าถึงตัวเลขได้ แต่ก่อนอื่น คุณต้องคลิกที่ปุ่ม 123 นี่เป็นการเพิ่มขั้นตอนที่ไม่จำเป็น
สำหรับช่องป้อนข้อมูลที่มีจุดประสงค์เพียงอย่างเดียวคือการเพิ่มจำนวนครั้งและการยกน้ำหนัก จะทำให้ป๊อปอัปแป้นพิมพ์ตัวเลขบนสมาร์ทโฟนปรากฏขึ้นเท่านั้น
ในการทำเช่นนั้น คุณเพียงแค่ระบุว่าคุณต้องการให้องค์ประกอบอินพุตของคุณยอมรับการป้อนตัวเลข:
ชอบสิ่งนี้:
<input type="number" />และผลลัพธ์ (บนอุปกรณ์ iOS):
และนั่นคือทั้งหมดที่มี!
