วิธีเลื่อนระหว่าง Text Field ด้วยปุ่ม Next บนคีย์บอร์ด iOS

เพื่อเลื่อนไปยัง Text Field ถัดไป عندกดปุ่ม Return/Done บนคีย์บอร์ด ต้องสร้างลอจิกด้วย Delegate และ Tag

ขั้นตอนการทำ

1. สร้างโปรเจกต์ วาง Text Field 4 ตัวบน Storyboard
2. ตั้งค่า Tag ให้แต่ละตัวเป็น 1, 2, 3, 4 ตามลำดับ
3. ตั้งค่า Return Key เป็น "Done" ใน Attribute Inspector
4. สร้าง IBOutlet เชื่อม Text Field ทั้ง 4 ตัว

@IBOutlet weak var tf1: UITextField!
@IBOutlet weak var tf2: UITextField!
@IBOutlet weak var tf3: UITextField!
@IBOutlet weak var tf4: UITextField!

5. ทำให้ ViewController conform UITextFieldDelegate
6. ใน viewDidLoad ตั้ง delegate ให้ทุก Text Field

override func viewDidLoad() {
    super.viewDidLoad()
    tf1.delegate = self
    tf2.delegate = self
    tf3.delegate = self
    tf4.delegate = self
}

7. Implement textFieldShouldReturn

extension ViewController: UITextFieldDelegate {
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        let nextTag = textField.tag + 1
        if let nextTF = textField.superview?.viewWithTag(nextTag) as? UITextField {
            nextTF.becomeFirstResponder()
        } else {
            textField.resignFirstResponder()
        }
        return true
    }
}

โค้ดเต็ม

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var tf1: UITextField!
    @IBOutlet weak var tf2: UITextField!
    @IBOutlet weak var tf3: UITextField!
    @IBOutlet weak var tf4: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        [tf1, tf2, tf3, tf4].forEach { $0?.delegate = self }
    }
}

extension ViewController: UITextFieldDelegate {
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        let nextTag = textField.tag + 1
        if let nextTF = textField.superview?.viewWithTag(nextTag) as? UITextField {
            nextTF.becomeFirstResponder()
        } else {
            textField.resignFirstResponder()
        }
        return true
    }
}

ปรับปรุงเพิ่มเติม

• ใช้ Array เก็บ Text Field แทนการเขียนซ้ำ
• รองรับการเลื่อนย้อนกลับด้วยปุ่ม "Previous" ได้ด้วยการลด Tag
• ใช้ Toolbar บนคีย์บอร์ดสำหรับ UX ที่ดีกว่า