Placeholder Field by Seth Willits 02-12-05 Printer Version

Text Field Placeholders
You may be wondering what a text field placeholder is, but chances are you've seen them at least 1000 times already. The text in the search fields below are called the "placeholders" of the fields. They are the strings of text that appear in the field before you type anything into them. We won't be creating a rounded search field today (if you want one of them, see the search field plugin on my website) but we will be creating the disappearing act for the gray text.

How It Works
The basis of this EditField subclass is two methods that show or hide the placeholder in the field.

The rest of the code is simply determining when to call these methods based on whether there's text in the field, whether it has focus etc..

When the field first is shown, we set the text to the Placeholder string with a gray color.

When the user clicks in the field (or tabs to it) we hide the placeholder text if ShowAlways is false. ShowAlways is a boolean property which when true, will show the placeholder text even if the field has focus. It disappears when the user starts typing something. This is useful in the case of showing an example of what should be typed, as opposed to when the placeholder describes what the field is. The behavior in Cocoa is the same ShowAlways being false.

Similarly when the field loses focus, we call ShowPlaceholerText

When the user types in the field, if the user tries to arrow around in the field when the placeholder text is there, then the arrows are ignored. Same as with the delete key. This is to prevent the user from actually editing the placeholder text while it's in the field.

Similarly, in the SelChange event we check to see if the user clicked inside the placeholder text, and if they did, we move the selection to the start of the field, so they can't edit the placeholder text.

And last but not least when the text of the field changes, we call ShowPlaceholderText so that if the field ever becomes empty, the placeholder is shown.