How to toggle a UITextField secure text entry (hide password) in Swift?

Question

I currently have a UITextfield with an eye icon in it that when pressed is supposed to toggle the secure text entry on and off.

I know you can che

Answer 1

I wrote extension for the same. To provide Password toggle.

1. In your Assets first add images that you want for toggle.

2. Add following Extension for UITextField.

   extension UITextField {
   fileprivate func setPasswordToggleImage(_ button: UIButton) {
       if(isSecureTextEntry){
           button.setImage(UIImage(named: "ic_password_visible"), for: .normal)
       }else{
           button.setImage(UIImage(named: "ic_password_invisible"), for: .normal)
   
       }
   }
   
   func enablePasswordToggle(){
       let button = UIButton(type: .custom)
       setPasswordToggleImage(button)
       button.imageEdgeInsets = UIEdgeInsets(top: 0, left: -16, bottom: 0, right: 0)
       button.frame = CGRect(x: CGFloat(self.frame.size.width - 25), y: CGFloat(5), width: CGFloat(25), height: CGFloat(25))
       button.addTarget(self, action: #selector(self.togglePasswordView), for: .touchUpInside)
       self.rightView = button
       self.rightViewMode = .always
   }
   @IBAction func togglePasswordView(_ sender: Any) {
       self.isSecureTextEntry = !self.isSecureTextEntry
       setPasswordToggleImage(sender as! UIButton)
   }
   }
   

3. Call extension on your UITextView Outlet

    override func viewDidLoad() {
                super.viewDidLoad()
                txtPassword.enablePasswordToggle()
                txtConfirmPassword.enablePasswordToggle()
            }
   

Answer 2

Swift 3

//    MARK: Btn EyeAction
@IBAction func btnEyeAction(_ sender: Any) {

    if(iconClick == true) {
        txtPassword.isSecureTextEntry = false
        iconClick = false
    } else {
        txtPassword.isSecureTextEntry = true
        iconClick = true
    }
}

Answer 3

Use this code,

iconClick is bool variable, or you need other condition check it,

var iconClick = true

eye Action method:

@IBAction func iconAction(sender: AnyObject) {
        if(iconClick == true) {
            passwordTF.secureTextEntry = false
        } else {
            passwordTF.secureTextEntry = true
        }

        iconClick = !iconClick
    }

hope its helpful

Answer 4

Swift 4 solution

You don't need extra if statement for simple toggle isSecureTextEntry property

func togglePasswordVisibility() {
        password.isSecureTextEntry = !password.isSecureTextEntry
    }

But there is a problem when you toggle isSecureTextEntry UITextField doesn't recalculate text width and we have extra space to the right of the text. To avoid this you should replace text this way

func togglePasswordVisibility() {
        password.isSecureTextEntry = !password.isSecureTextEntry
        if let textRange = password.textRange(from: password.beginningOfDocument, to: password.endOfDocument) {
            password.replace(textRange, withText: password.text!)
        }
    }

UPDATE

Swift 4.2

Instead of

password.isSecureTextEntry = !password.isSecureTextEntry

you can do this

password.isSecureTextEntry.toggle()

Answer 5

First you need to set image(visible or hide) of button of eye for different state (selected or normal)

than connect IBAction and write code like

@IBAction func btnPasswordVisiblityClicked(_ sender: Any) {
        (sender as! UIButton).isSelected = !(sender as! UIButton).isSelected
        if (sender as! UIButton).isSelected {
            txtfPassword.isSecureTextEntry = false
        } else {
            txtfPassword.isSecureTextEntry = true
        }
    }

Answer 6

Assignment values change from YES/NO to true/false boolean values.

password.secureTextEntry = true //Visible
password.secureTextEntry = false //InVisible

You can try this code.. i think it's helpful.