CODEWITHSUNDEEP
swiftuitextfieldnsattributedstringplaceholder
Kuldeep
Kuldeep

Reputation: 4552

How to add space between UITextField Placeholder characters?

I want to add Space between UITextField placeHolder Text.

func setTextFieldCharacterSpacing(txtField: TextFieldCustomize) {
    let attributedString = NSMutableAttributedString(string: txtField.text!)
    attributedString.addAttribute(NSAttributedStringKey.kern, value: CGFloat(8.0), range: NSRange(location: 0, length: attributedString.length))
    txtField.attributedText = attributedString
}

Edit 1

I have done this by using textField delegate method as below.

extension LoginVC: UITextFieldDelegate {
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        CommonHelper.sharedInstance.setTextFieldCharacterSpacing(txtField: textField as! TextFieldCustomize)
        return true
    }
}

Edit 2

I have 1 textField with secure entry. when I type anything in that textField, txtField.attributedTextspace between characters not applied.

Without Secure Field enter image description here

With Secure Field

enter image description here

This works for Username but not for password secure field.

how to add space between characters in secure entry textField?

Thanks in advance.

Upvotes: 2

Views: 3267

Answers (3)

TheTiger
TheTiger

Reputation: 13354

Your attirbutedString code is okay you're just putting it in wrong property of textField. attributedPlaceholder is the right one. attributedText is used to set the text value not placeholder.

So change 

txtField.attributedText = attributedString

to 

textField.attributedPlaceholder = attributedString

Below is the output:

enter image description here

EDIT: While user is typing

Add target on textField for editingDidChange event

textField.addTarget(self, action: #selector(textFieldEdidtingDidChange(_ :)), for: UIControlEvents.editingChanged)

And here is how can you give space while user is typing.

@objc func textFieldEdidtingDidChange(_ textField :UITextField) {
    let attributedString = NSMutableAttributedString(string: textField.text!)
    attributedString.addAttribute(NSAttributedStringKey.kern, value: CGFloat(8.0), range: NSRange(location: 0, length: attributedString.length))
    textField.attributedText = attributedString
}

Output:

enter image description here

EDIT: 2

After analyzing the demo project provided by @kuldeep it seems secureTextEntry is not working if we use customFont (other than the system). I tried with systemFont and it works and its also working for all fonts if we uncheck the secureTextEntry.

I don't know why it spacing is not working in that case but I come up with below solution:

I'm not gonna using secureTextEntry instead I will replace all the characters on editingChange event. So I created a custom class:

class PasswordField: TextFieldCustomize {
    var originalText: String? /// Your original text
    var customChar = "•" /// Custom character to replace with original character while typing
}
/// TextFieldCustomize is a custom class I found in demo project.

And here is the updated method for editingChange:

@objc func textFieldEdidtingDidChange(_ textField :UITextField) {

    var string = textField.text;
    if let passwordField = textField as? PasswordField {
       /// Replace all the characters by custom character •
       var newString = ""
       let count = string?.characters.count ?? 0
       for i in 0..<count {
            if i == count - 1 {
                let lastChar = string!.characters.last!
                newString.append(lastChar)
            }
            else {
                newString.append(passwordField.customChar)
            }
       }
       string = newString

        /// This will be your original text, So use passwordField.originalText instead of passwordField.text when needed
         passwordField.originalText = textField.text
     }

     let attributedString = NSMutableAttributedString(string: string!)
     attributedString.addAttribute(NSAttributedStringKey.kern, value: CGFloat(8.0), range: NSRange(location: 0, length: attributedString.length))
     textField.attributedText = attributedString
}

Upvotes: 2

Kamran
Kamran

Reputation: 15248

For placeholder you should do it like this,

let attributedString = NSMutableAttributedString(string: txtField.placeholder!)
attributedString.addAttribute(NSAttributedStringKey.kern, value: CGFloat(8.0), range: NSRange(location: 0, length: attributedString.length))
txtField.attributedPlaceholder = attributedString

If you have not set placeholder text in storyboard then you should also set its value before calling the above snippet,

txtField.placeholder = "Developer"

Upvotes: 1

Arnab
Arnab

Reputation: 4356

If you want left padding in TextField just use below code, it'll add padding to the left for placeholder as well as text

txtField.layer.sublayerTransform = CATransform3DMakeTranslation(5, 0, 0);

The amount of left padding you can change by changing the value of at first argument .

Edit

If you want space between characters, why don't you use attributedPlaceholder property? I tried your code with attributedPlaceholder, and it works perfectly.

let attributedString = NSMutableAttributedString(string: "Developer")
attributedString.addAttribute(NSAttributedStringKey.kern, value: CGFloat(8.0), range: NSRange(location: 0, length: attributedString.length))
txtField.attributedPlaceholder = attributedString

Upvotes: 0

Related Questions