ios - 如何实现用于 SMS 验证码的 UITextField 布局/设计？

Question

我正在尝试为 SMS 验证代码实现以下功能。我将如何实现它？在查看了 Github 中的一堆库后，没有一个与这个在业界广泛使用的设计足够相似。

我尝试用六个文本字段来实现它，但发现了很多问题，因为工作量很大，除了第一个文本字段之外的所有初始输入都被阻塞了，延迟移动firstResponder等等，这让我想知道拥有 6 个文本字段是否真的是最好的方法。

四舍五入是小菜一碟。困难的部分是功能（即光标平滑移动，来回移动，输入错误时使它们全部变为红色等）

你们有什么感想？我怎样才能实现这样的行为/功能？

Answer 1

试试下面的代码。（目前它包含 4 UITextField，根据您的要求进行更改。）

extension ConfirmationCodeViewController: UITextFieldDelegate {

    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        if !(string == "") {
            textField.text = string
            if textField == txtFirst {
                txtSecond.becomeFirstResponder()
            }
            else if textField == txtSecond {
                txtThird.becomeFirstResponder()
            }
            else if textField == txtThird {
                txtForth.becomeFirstResponder()
            }
            else {
                textField.resignFirstResponder()
            }
            return false
        }
        return true
    }

    func textFieldShouldBeginEditing(_ textField: UITextField) -> Bool {
        if (textField.text?.count ?? 0) > 0 {

        }
        return true
    }
}

Answer 2

试试这个（确保添加了 textField 标签并连接了委托）

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
    if (string != "") {
        
        if (textField.text == "") {
            textField.text = string
            let nextResponder: UIResponder? = view.viewWithTag(textField.tag + 1)
            if (nextResponder != nil) {
                nextResponder?.becomeFirstResponder()
            }
        }
        return false
    } else {
        
        textField.text = string

        let nextResponder: UIResponder? = view.viewWithTag(textField.tag - 1)
        if (nextResponder != nil) {
            nextResponder?.becomeFirstResponder()
        }
        return false
    }
}

Answer 3

请看看这个 git hub 库...

PinCodeTextField

您还可以自定义输入文本字段的数量。

Answer 4

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        // On inputing value to textfield
        if ((textField.text?.characters.count)! < 1  && string.characters.count > 0 ){

            let nextTag = textField.tag + 1

            // get next responder
            var nextResponder = textField.superview?.viewWithTag(nextTag)

            if (nextResponder == nil){
                nextResponder = textField.superview?.viewWithTag(1)
            }
            textField.text = string;
            //resign at 4th textfield
            if textField.tag == 4{
                txt4.resignFirstResponder()
            }else{
                nextResponder?.becomeFirstResponder()
            }
            return false
        }
}

试试上面的代码，我已经拿了 4 个 UITextFields 并将其辞职到最后一个文本字段，你可以拿多少你想要的。