Placeholder in TextView

Vikas Kore
2 min readFeb 28, 2019

--

Placeholder in iOS is the information text used to represent user of View.
Placeholder is the instance property of TextField in iOS but as we know like this is not for TextView.

To give placeholder text in TextView and make it behave like TextField we have to play with text color and delegate methods of TextView.

Give separate color for placeholder text and typed text

It helps us to distinguish between Placeholder text and typed text using keyboard.
Suppose we have placeholder text : “Please comment here…” then
var placeholder = “Please comment here…”
and add placeholder text to your TextView in ViewDidLoad()
myTextView.text = placeholder
myTextView.textColor = .lightGray

Use delegate methods of TextView

When we begin editing myTextView then check text color, if it’s lightGray color or which we assign to placeholder text then make myTextView clear/empty and set normal text color which you want to show typed text.

func textViewDidBeginEditing(_ textView: UITextView) {
if textView.textColor == .lightGray {
textView.text = ""
textView.textColor = .black
}
}

When we end editing myTextView,
check if myTextView is empty: then assign empty string to our placeholder variable we declared previously because we are using same variable for future use.
otherwise assign myTextView text to placeholder variable

func textViewDidEndEditing(_ textView: UITextView) {
if textView.text.isEmpty {
textView.text = "Please comment here..."
textView.textColor = UIColor.lightGray
placeholder = ""
} else {
placeholder = textView.text
}
}

we have a delegate method which will call on text change in textView we are using this method to keep placeholder variable updated with entered text in textView.

func textViewDidChange(_ textView: UITextView) {
placeholder = textView.text
}

That it.

If you want to change color based on the text in placeholder variable: check if myTextView have this “Please comment here…” text then set light color otherwise normal text color to text which you prefer:

if placeholder == “Please comment here…” {
myTextView.textColor = .lightGray
} else {
myTextView.textColor = .black
}

Extra note:
Allow textview to take upto certain characters or grow upto certain height as like in chat module we can do like following

func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
return ((textView.text.count) > 180 && textView.frame.size.height > 100.0) ? false : true
}

To print remaining allowed characters(Suppose you have 20 character limit)
countingLabel is to display number of remaining character user can enter in textView, like: 10/20, 9/20

func textViewDidChange(_ textView: UITextView) {
countingLabel.text = "\(20 - textView.text.count)/20"
}func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
return textView.text.count + (text.count - range.length) <= 20
}

Check this link for full code: https://gist.github.com/vikaskore/5d5973f748235b8c04fee46cbacdc4cd

That’s it! Happy Coding.

--

--

Vikas Kore
Vikas Kore

No responses yet