UI Pattern UI เลือกปุ่ม Enter ให้ส่งข้อความหรือขึ้นบรรทัดใหม่ By uiblogaziner June 6, 20159913 views ShareTweet 0 ตามปกติแล้วเราสามารถใช้ปุ่ม Enter เพื่อใช้เป็นคีย์ลัดสำหรับการส่งฟอร์มทั่วๆ ไปได้ เช่น เมื่อกรอกช่อง Username / Password เสร็จเรียบร้อยแล้ว เราสามารถกดปุ่ม Enter แทนการใช้เมาส์เลือกคลิกปุ่ม Login ได้เลย (หากโค้ดดิ้งถูกนะครับ) ตัวอย่างสถานการณ์ที่ต้องการกด Enter เพื่อขึ้นบรรทัดใหม่ในช่องกรอกข้อความหลายบรรทัด แต่บางทีก็อาจต้องการส่งฟอร์ม แต่หาก UI สุดท้ายของฟอร์มเป็น “ช่องกรอกข้อมูลได้หลายบรรทัด” (Multiple line text fields) เราจะพบปัญหาว่า การกด Enter ควรจะให้เป็นการขึ้นบรรทัดใหม่ของข้อความดี หรือว่าจะให้เป็นการส่งฟอร์มดีหนอ? Facebook จัดฟังก์ชันให้ยูสเซอร์เลือกได้ว่าจะให้ปุ่ม Enter ทำหน้าที่อะไร ตรงบริเวณใกล้ปุ่มส่งข้อความ Facebook เข้าใจปัญหาในส่วนของฟังก์ชันการส่งข้อความตรงจุดนี้ดี จึงทำการแก้ปัญหาด้วยการให้ยูสเซอร์สามารถเลือกกำหนดได้ว่า จะให้ปุ่ม Enter ทำหน้าที่อะไร (ให้อำนาจการควบคุมแก่ยูสเซอร์) ตรงบริเวณด้านล่างของ Message box ซึ่งจะมีให้ติ๊กเลือก ‘Press Enter to Send’ นั่นหมายความว่า เมื่อเรากด Enter หลังพิมพ์เสร็จ ข้อความที่เราพิมพ์ในช่องกรอกข้อความก็จะถูกส่งทันที แนะนำให้เลือกไว้ หากเราเป็นคนที่ชอบพิมพ์ตอบเป็นประโยคสั้นๆ ซึ่งก็ค่อนข้างเหมาะกับ app social พอสมควรครับ เพราะโดยสังเกตเราจะพิมพ์ข้อความยาวๆ ก็ตอนที่ส่งเมล หรือพิมพ์งานเท่านั้นนะ ^ ^! กดปุ่ม Enter เพื่อส่งฟอร์มได้ทุกเมื่อ หากไม่ได้กำลังพิมพ์อยู่ในช่องกรอกข้อความได้หลายบรรทัด แต่ถ้าเป็นฟอร์มทั่วไป ผมแนะให้เซ็ตการกด Enter เป็นการขึ้นบรรทัดใหม่ขณะที่กำลังพิมพ์อยู่ในช่องกรอกข้อมูลหลายบรรทัดนี้ ส่วนกรณีอื่นเช่น ยูสเซอร์เอาเมาส์ไปคลิกอยู่ส่วนอื่นของฟอร์มก็ควรทำให้การกดปุ่ม Enter เป็นการส่งฟอร์มนะครับ หากข้อมูลกรอกไม่ครบอย่างไร ก็ให้ขึ้นข้อความแจ้งเตือนตามเหตุการณ์ครับ เมื่อเอาเมาส์ไปวางบนปุ่ม ส่ง ของฟอร์มกรอกรายละเอียดอีเมลของ Gmail จะมีข้อความบอกใบ้คีย์ลัดในการส่งอีเมลให้เราทราบ ฟอร์มกรอกรายละเอียดอีเมลของ Gmail อนุญาตให้เราสามารถใช้ปุ่ม shortkey เพื่อส่งฟอร์มได้ด้วยการกด Ctrl+Enter (สำหรับ Windows) หรือ Command + Enter (สำหรับ MAC) สรุปแล้ว เราต้องดูว่ารายละเอียดฟอร์มของเราเป็นอย่างไร หากมีเฉพาะช่องกรอกข้อความหลายบรรทัด อาจเลือกวิธีแบบ Facebook (มี checkbox ให้เลือกว่าปุ่ม Enter ทำงานฟังก์ชันใด) หรือ Gmail (สร้างคีย์ลัดในการส่งฟอร์ม) ก็ใช้การได้ดีทีเดียวครับ และหากมีช่องกรอกข้อความหลายช่องรวมกับช่องกรอกข้อความหลายบรรทัดก็ลองพิจารณาประยุกต์ไอเดียที่นำเสนอดูนะครับ ไม่ยากๆ 🙂