Four digit Pin Entry/ OTP screen in iOS

Question

Can anyone suggest me how to create a 4 digit pin entry screen like One time password, User will enter and one circle will be checked/darken.

I know I can create this by using images and hidden text field. But I am unable to decide best way for the same.

Any help will be appreciated.

Create a textfield with secueTextentry enabled and when user enters the key match the user id and the OTP for the user in your WS or DB . — sourav, Dec 19 '15 at 06:27

score 3 · Answer 1 · answered Dec 19 '15 at 06:14

3

Imagine you have a UITextField. Getting the user's input to show up as black dots (and not expose their information) is as easy as doing this (assuming the UITextField is called field, and that you're using Swift).

field.secureTextEntry = true

Honestly I'm not totally sure what you're asking but this is my best guess.

answered Dec 19 '15 at 06:14

William Rosenbloom

2,506
1
14
37

No,You did not get me,, A Full screen is to be created with No text fields, what user will be able o see is a dark circle every time he taps a letter from keyboard. – Sundeep Saluja Dec 19 '15 at 06:31
@SundeepSaluja oh so you want like four boxes that will fill with dark circles as the user enters his PIN from a number pad? – William Rosenbloom Dec 19 '15 at 06:50

score 0 · Answer 2 · answered Dec 19 '15 at 07:56

My best guess to achieve this using image. You can simply add image on your UITextField's subview.

 func addImageToTextField(txtPin : UITextField)
    {
        let imageView = UIImageView();

        let image = UIImage(named: "darkImage.png");

        imageView.image = image;

        imageView.frame = CGRect(x: 0, y: 0, width: txtPin.frame.width, height: txtPin.frame.height)

        txtPin.addSubview(imageView)

    }

And call this method from textFieldshouldChangeCharactersInRange

func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -> Bool {

        textField.textColor = UIColor.clearColor()
        if (!string.isEmpty) {

            self.addImageToTextField(textField)
         }

Similarly you can do the same if user hits back button to clear the textfield

I have done this and works like a charm for me. Cheers !! happy coding.

Four digit Pin Entry/ OTP screen in iOS

2 Answers2