How to achieve this UITextField layout/design used for SMS Verification Code?

Question

I am trying to achieve the following functionality for SMS Verification code. How would I achieve it? After looking into a bunch of libraries in Github, none was similar enough to this design, which is widely used in the industry.

I tried implementing it with six textfields but found a number of problems as a lot of work, blocking all but the first textfield for initial input, laggy move of firstResponder and whatnot, what made me wonder if having 6 textfields is really the best approach.

Rounding the borders is piece of cake. The hard part is the functionality (i.e the cursor moving smoothly, getting back and forth, making all of them red when input is wrong, etc)

What do you guys think? How could I achieve such behavior/functionality?

Possible duplicate of [Allowing single digit in UITextField in iOS](https://stackoverflow.com/questions/18711468/allowing-single-digit-in-uitextfield-in-ios) — Jayesh Thanki, Feb 01 '18 at 06:37

score 7 · Answer 1 · answered Feb 01 '18 at 06:55

Try Below Code. (Currently it contains 4 UITextField, change it as per your requirement.)

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
    }
}

Surender Singh · Answer 2 · 2021-11-15T12:48:47.800

4

Try this (make sure textField tags are added and the delegate is connected)

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
    }
}

edited Nov 15 '21 at 12:48

answered Jan 10 '20 at 09:25

Surender Singh

57
4

1

Don't forget to add tag values for your textfields. If you want to go from left to right, add tag values from 0 to N - 1 (N = number of textfield ), first textfield on the left should have tag value 0, and the latest textfield on the right should have N-1 value – T.Jurko Jan 14 '20 at 14:20
@T.Jurko YES, we need to add tag values for textFields. Thank you – Surender Singh Jan 16 '20 at 04:58
No problem. Great solution. – T.Jurko Jan 22 '20 at 13:28
@SurenderSingh Works like a charm – Vaibhav Jhaveri Nov 02 '21 at 16:59

score 2 · Answer 3 · answered Feb 01 '18 at 12:21

2

Please have a look to this git hub library...

PinCodeTextField

Your can also customise the number of input textfields.

answered Feb 01 '18 at 12:21

Sarabjit Singh

1,814
1
17
28

1

thanks, this is what i've searching for so long, what query should i search on google for cocoa library like this? – alexringo Feb 09 '18 at 09:02

score 1 · Answer 4 · answered Feb 01 '18 at 07:46

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
        }
}

Try above code, I have taken 4 UITextFields and resign it to last textfield and you can take as much you want it.

How to achieve this UITextField layout/design used for SMS Verification Code?

4 Answers4