Input Mask: คืออะไร มาสก์การป้อนข้อมูลและการจัดรูปแบบ

มาสก์การป้อนข้อมูลคืออะไร?

Input Mask (มาสก์การป้อนข้อมูล) คือกลไกที่กำหนดเทมเพลตสำหรับข้อมูลที่ป้อนและจัดรูปแบบข้อความโดยอัตโนมัติเมื่อพิมพ์ ผู้ใช้ป้อนเฉพาะอักขระสำคัญ (ตัวเลข ตัวอักษร) และระบบจะเพิ่มตัวคั่นโดยอัตโนมัติ: ช่องว่าง ยัติภังค์ วงเล็บ เครื่องหมายทับ นี่คือความแตกต่างหลักจากการประมวลผลภายหลัง ซึ่งข้อมูลจะถูกจัดรูปแบบหลังจากป้อนเสร็จ

มาสก์การป้อนข้อมูลแก้ปัญหา สามประการ ของประสบการณ์ผู้ใช้ ประการแรก — ภาระทางการคิด: ผู้ใช้ไม่จำเป็นต้องจำรูปแบบข้อมูลและใส่ตัวคั่นด้วยตนเอง ประการที่สอง — ความเร็วในการป้อน: การแทรกตัวคั่นอัตโนมัติและการเลื่อนไปยังกลุ่มอักขระถัดไปช่วยเร่งการพิมพ์ ประการที่สาม — คุณภาพข้อมูล: มาสก์รับประกันว่าข้อมูลจะถูกรวบรวมในรูปแบบเดียวกันโดยไม่มีความแตกต่าง

แตกต่างจาก NSFormatter ซึ่งทำงานที่ระดับการแสดงผลของข้อมูลที่ป้อนแล้ว Input Mask ทำงานที่ระดับการป้อนข้อมูล: มันควบคุมทุกอักขระที่ป้อนและพิจารณาว่าอนุญาตในตำแหน่งปัจจุบันของมาสก์หรือไม่ หากอักขระไม่ตรงกับมาสก์ อักขระนั้นจะถูกปฏิเสธหรือละเว้น

ตาม การวิจัย UX ของ Apple (2024) มาสก์การป้อนข้อมูลมีประสิทธิภาพสูงสุดสำหรับฟิลด์ที่ผู้ใช้ป้อนข้อมูลในรูปแบบที่ไม่คุ้นเคย ตัวอย่างเช่น SNILS (000-000-000 00) หรือ INN (000000000000) — ผู้ใช้อาจไม่ทราบจำนวนตัวเลขที่แน่นอนหรือตำแหน่งของตัวคั่น และมาสก์จะแนะนำรูปแบบที่ถูกต้องด้วยภาพ

ไวยากรณ์ของมาสก์การป้อนข้อมูล

ไวยากรณ์ของมาสก์ ในไลบรารี InputMask ใช้การรวมกันของอักขระตัวยึดตำแหน่งและอักขระคงที่ ตัวยึดตำแหน่งกำหนดประเภทของอักขระที่อนุญาตในแต่ละตำแหน่ง: 0 หรือ 9 สำหรับตัวเลข A สำหรับตัวอักษร _ สำหรับอักขระใด ๆ อักขระคงที่คือตัวคั่นที่แทรกโดยอัตโนมัติ: ช่องว่าง ยัติภังค์ วงเล็บ จุด เครื่องหมายทับ

บล็อกบังคับและไม่บังคับ

วงเล็บเหลี่ยม [0] ระบุอักขระบังคับ — ผู้ใช้ต้องป้อนตัวเลขในตำแหน่งนี้ วงเล็บปีกกา {0} ระบุอักขระที่ไม่บังคับ — หากผู้ใช้ข้ามบล็อก มาสก์จะไม่แทรกตัวคั่นที่เกี่ยวข้อง ตัวอย่างเช่น มาสก์ [00]{.}[00]{.}[0000] สำหรับวันที่: หากผู้ใช้ไม่ป้อนเดือน ตัวคั่นหลังจากวันจะไม่แสดงเช่นกัน

ส่วนต่อท้ายของมาสก์

อักขระคงที่ นอกวงเล็บเหลี่ยมและวงเล็บปีกกาคือส่วนต่อท้าย — อักขระเหล่านี้จะแสดงเสมอ แม้ว่าฟิลด์จะว่างเปล่า ตัวอย่างเช่น ในมาสก์ +7 ([000]) [000]-[00]-[00] อักขระ +7, (, ), ช่องว่าง และยัติภังค์เป็นส่วนต่อท้ายและผู้ใช้ไม่สามารถลบได้ ส่วนต่อท้ายช่วยให้ผู้ใช้เข้าใจรูปแบบที่คาดหวังก่อนเริ่มป้อนข้อมูล

ประเภทของมาสก์ตามวัตถุประสงค์

มาสก์การป้อนข้อมูล ถูกจำแนกตามประเภทของข้อมูลที่ออกแบบมา แต่ละประเภทมีโครงสร้าง จำนวนกลุ่ม และตำแหน่งของตัวคั่นของตัวเอง การเลือกมาสก์ที่ถูกต้องมีความสำคัญต่อประสบการณ์ผู้ใช้ — หากมาสก์ไม่ตรงกับความคาดหวังของผู้ใช้ ผู้ใช้จะลบอักขระที่แทรกโดยอัตโนมัติ

มาสก์สำหรับหมายเลขโทรศัพท์

มาสก์โทรศัพท์ เป็นประเภทที่พบมากที่สุด หมายเลขรัสเซียถูกจัดรูปแบบเป็น +7 ([000]) [000]-[00]-[00] หมายเลขอเมริกันเป็น +1 ([000]) [000]-[0000] มาสก์ต้องรองรับจำนวนตัวเลขที่แตกต่างกันในรหัสประเทศและเมือง ไลบรารี InputMask รองรับมาสก์ลำดับความสำคัญ: หากมาสก์แรกไม่เหมาะสม (ผู้ใช้ป้อนรหัสประเทศอื่น) มาสก์ที่สองจะถูกนำไปใช้

มาสก์สำหรับบัตรธนาคาร

สำหรับ หมายเลขบัตร ใช้มาสก์ [0000] [0000] [0000] [0000] โดยมีช่องว่างระหว่างกลุ่มละ 4 ตัวเลข นอกจากนี้ สามารถใช้มาสก์สำหรับวันที่หมดอายุ [00]/[00] และรหัส CVV [000] มาสก์หมายเลขบัตรรองรับ 16–19 ตัวเลขขึ้นอยู่กับระบบการชำระเงิน: Visa และ Mastercard — 16 ตัวเลข American Express — 15 Maestro — 12–19

มาสก์สำหรับวันที่และรหัส

มาสก์วันที่ ใช้รูปแบบ [00]{.}[00]{.}[0000] โดยมีจุดหรือเครื่องหมายทับเป็นตัวคั่น สำหรับ INN, SNILS และตัวระบุอื่น ๆ จะใช้มาสก์เฉพาะ: INN — [000000000000] (12 ตัวเลข) SNILS — [000]-[000]-[000] [00] (11 ตัวเลขด้วยยัติภังค์) สำหรับรหัสยืนยัน — [0000] หรือ [000000] ขึ้นอยู่กับความยาว

การ implement มาสก์ใน Swift

การ implement มาสก์ ใน Swift ทำได้โดยการตั้งค่า delegate ของ UITextFieldDelegate โดยใช้ไลบรารี InputMask ไลบรารีมีคลาส MaskedTextFieldDelegate ซึ่งเชื่อมต่อกับฟิลด์ข้อความและจัดรูปแบบอินพุตโดยอัตโนมัติตามมาสก์ที่ระบุ

import InputMask

class PaymentViewController: UIViewController {

    @IBOutlet var cardField: UITextField!
    @IBOutlet var dateField: UITextField!
    @IBOutlet var cvvField: UITextField!

    var cardListener: MaskedTextFieldDelegate!

    override func viewDidLoad() {
        super.viewDidLoad()
        cardListener = MaskedTextFieldDelegate()
        cardListener.primaryMaskFormat = "[0000] [0000] [0000] [0000]"
        cardField.delegate = cardListener
        dateField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[00]/[00]"
        )
        cvvField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[000]"
        )
    }
}

สำหรับ หมายเลขโทรศัพท์ ที่มีการตรวจจับประเทศอัตโนมัติ ให้ใช้มาสก์ลำดับความสำคัญ MaskedTextFieldDelegate รองรับอาร์เรย์ของมาสก์: มาสก์ที่ตรงกันตัวแรกจะถูกนำไปใช้ หากผู้ใช้ป้อนรหัส +1 จะใช้รูปแบบอเมริกัน หาก +7 — รูปแบบรัสเซีย

let phoneListener = MaskedTextFieldDelegate()
phoneListener.primaryMaskFormat = "+7 ([000]) [000]-[00]-[00]"
phoneListener.affinityMask = [
    "+1 ([000]) [000]-[0000]",
    "+44 [000] [000] [0000]",
    "+49 [000] [0000] [0000]"
]

สำหรับ วันที่ที่มีบล็อกไม่บังคับ ให้ใช้วงเล็บปีกกา หากผู้ใช้ป้อนเฉพาะวัน มาสก์จะแสดง “21” หากป้อนวันและเดือน — “21.07” หากป้อนทั้งสามส่วน — “21.07.2026” บล็อกที่ไม่บังคับทำให้มาสก์ปรับเปลี่ยนได้และไม่บังคับให้ผู้ใช้ป้อนข้อมูลที่เขาไม่ต้องการให้

let dateListener = MaskedTextFieldDelegate(
    primaryMaskFormat: "[00]{.}[00]{.}[0000]"
)
dateField.delegate = dateListener

การจัดการการวางและการลบ

การจัดการการวางที่ถูกต้อง เป็นหนึ่งในแง่มุมที่ซับซ้อนที่สุดของการ implement มาสก์การป้อนข้อมูล เมื่อวางข้อความ (เช่น หมายเลขบัตรจากคลิปบอร์ด) ไลบรารีต้องลบตัวคั่นทั้งหมดออกจากข้อความที่วาง แยกเฉพาะอักขระสำคัญ แล้วใช้มาสก์กับข้อมูลที่สะอาด InputMask จาก RedMadRobot ทำสิ่งนี้โดยอัตโนมัติผ่านเมธอด shouldChangeCharactersIn

เมื่อ วางข้อความที่จัดรูปแบบแล้ว (ที่มีช่องว่างหรือยัติภังค์) ไลบรารีจะปรับข้อมูลให้เป็นมาตรฐานก่อน: ลบอักขระทั้งหมดที่ไม่ตรงกับรูปแบบมาสก์ จากนั้นใช้มาสก์กับสตริงที่ปรับมาตรฐานแล้ว หากข้อความที่วางมีอักขระที่ไม่ถูกต้อง (ตัวอักษรในมาสก์ตัวเลข) อักขระเหล่านั้นจะถูกละเว้น

การจัดการ การลบ (แบ็คสเปซ) ในมาสก์ต้องให้ความสนใจเป็นพิเศษ เมื่อกดแบ็คสเปซ มาสก์ต้องลบอักขระสำคัญตัวสุดท้าย ไม่ใช่ตัวคั่นคงที่ หากเคอร์เซอร์อยู่หลังอักขระคงที่ แบ็คสเปซต้องข้ามมันและลบอักขระสำคัญก่อนหน้า InputMask implement พฤติกรรมนี้ผ่านสแต็กของอักขระที่ป้อน

สำหรับ การเลือกและแทนที่ข้อความ มาสก์ต้องจัดการสถานการณ์ที่ผู้ใช้เลือกส่วนหนึ่งของข้อความและแทนที่ด้วยเนื้อหาใหม่ได้อย่างถูกต้อง ไลบรารี InputMask รองรับสิ่งนี้ผ่านเมธอด modifyString ใน MaskedTextFieldDelegate ซึ่งรับช่วงการแทนที่และสตริงใหม่

แนวปฏิบัติที่ดีที่สุดสำหรับการออกแบบมาสก์

การออกแบบมาสก์ เริ่มต้นด้วยการวิเคราะห์ว่าผู้ใช้จะป้อนข้อมูลอย่างไร หากผู้ใช้ส่วนใหญ่รู้รูปแบบขึ้นใจ (หมายเลขโทรศัพท์) มาสก์ควรน้อยที่สุด — เฉพาะตัวคั่นระหว่างกลุ่ม หากรูปแบบไม่คุ้นเคย (SNILS, INN) มาสก์ควรให้ข้อมูลมากขึ้น โดยมีส่วนต่อท้ายและป้ายกำกับ

หลีกเลี่ยง มาสก์ที่มากเกินไป ที่มีอักขระคงที่จำนวนมาก มาสก์ +7 ([000]) [000]-[00]-[00] มีอักขระคงที่ 7 ตัวต่ออักขระสำคัญ 10 ตัว — ซึ่งยอมรับได้ แต่มาสก์ที่มีตัวคั่นมากเกินไปซึ่งผู้ใช้ต้องหลีกเลี่ยงตลอดเวลาจะให้โทษมากกว่าประโยชน์ หากคุณไม่แน่ใจเกี่ยวกับรูปแบบ — ใช้การป้อนข้อมูลอิสระ

สำหรับ แอปพลิเคชันระหว่างประเทศ โปรดทราบว่ารูปแบบข้อมูลอาจแตกต่างกันในแต่ละประเทศ หมายเลขโทรศัพท์ในสหรัฐอเมริกามีรูปแบบ +1 (XXX) XXX-XXXX ในขณะที่อิตาลี — +39 XXX XXX XXXX ใช้มาสก์ลำดับความสำคัญที่มีการตรวจจับประเทศอัตโนมัติตามรหัส หรือให้ผู้ใช้เลือกประเทศก่อนป้อนหมายเลข

ตาม การทดสอบ UX ของ InputMask ผู้ใช้ต้องการมาสก์ที่แสดงรูปแบบก่อนเริ่มป้อนข้อมูล (ผ่านตัวยึดตำแหน่งหรือส่วนต่อท้าย) และไม่บล็อกการป้อนอักขระ มาสก์ควรเป็นคำแนะนำ ไม่ใช่ข้อจำกัด หากผู้ใช้ป้อนอักขระที่ไม่ตรงกับมาสก์ ควรอนุญาตมากกว่าที่จะบล็อกการป้อนข้อมูลโดยไม่มีการอธิบาย