How To Create Field Placeholder Text Using Behaviors

This lesson will demonstrate how to create a field that displays placeholder text when the field is a) empty and b) does not have focus.

If you are not familiar with how to assign behaviors then please see this lesson.

What I Will Create

What I Will Create

The behavior I will show you will displays placeholder text in a field when the field is empty and does not have focus. The field will be light gray.

When the field has focus the placeholder text will disappear and the text color will be inherited (usually black).

Setting the Placeholder Text

Setting the Placeholder Text

You assign the placeholder text by setting the uPlaceholderText custom property (1) of the field (2). The behavior (3) will display this text when appropriate.

You must get and set the text of the field using the uText or uUTF8Text custom properties that are defined in the behavior. These custom properties only return a value if the user has entered some text. They won't return the text if the placeholder is being displayed.

set the uText of field "Field" to "Some Text"

put the uText of field "Field"

The Behavior Script

This is the script of the behavior. In the example stack it is stored in the Placeholder Text Behavior button.

==========

COPY & PASTE

==========

--> Script Locals

constant kPlaceholderTextColor = "125,125,125"

local sDefaultTextIsDisplayed ## Keeps track of whether or not default text is being displayed

--> Accessors

getprop uText

if sDefaultTextIsDisplayed then

return empty

else

return the text of me

end if

end uText

setprop uText pText

lock screen

_ClearDefaultText

set the text of me to pText

_DisplayDefaultText

unlock screen

end uText

getprop uUTF8Text

if sDefaultTextIsDisplayed then

return empty

else

return unidecode(the unicodetext of me, "utf8")

end if

end uUTF8Text

setprop uUTF8Text pText

lock screen

_ClearDefaultText

set the unicodetext of me to uniencode(pText, "UTF8")

_DisplayDefaultText

unlock screen

end uUTF8Text

--> Engine messages

on openField

## If default text is displayed then clear it out

_ClearDefaultText

pass openField

end openField

on closeField

_DisplayDefaultText

pass closeField

end closeField

on exitField

_DisplayDefaultText

pass exitField

end exitField

private command _ClearDefaultText

if sDefaultTextIsDisplayed then

lock screen

set the text of me to empty

set the textcolor of me to empty ## inherit default color

unlock screen

end if

## Reset

put false into sDefaultTextIsDisplayed

end _ClearDefaultText

private command _DisplayDefaultText

## Reset

put false into sDefaultTextIsDisplayed

## Is text empty?

if the text of me is empty then

## Am I focused? If so then don't do anything.

if the focusedobject is not the long id of me then

lock screen

set the text of me to the uPlaceholderText of me

set the textcolor of me to 125,125,125

put true into sDefaultTextIsDisplayed

unlock screen

end if

end if

end _DisplayDefaultText

7 Comments

Scott

Maybe it's because this is old but I simple created a field and added:

on openField
if the text of me is "Enter Keyword (s)" then
set the text of me to ""
end if
end openField

Trevor DeVore

@Scott - But what happens if the user doesn't type any text and then leaves the field? You're prompt is gone. Also, the text color of the prompt text is usually lighter than the text the user types in.

Jan Riemersma

I use the following code and works well for me.

on openField
if the text of me is "Search" then
set the text of me to empty
set the foregroundColor of me to black
end if
end openField

on exitField
if the text of me is empty then
set the text of me to "Search"
set the foregroundColor of me to "125,125,125"
end if
end exitField

Trevor DeVore

@Jan - you would also want to handle the closeField message. In addition, the behavior adds a property (uText) which will return empty if the user hasn't typed any text but the placeholder text is visible. With your solution you would need to make a decision when getting the text of the field as to whether or not the text entered was by the user or your prompt.

Jan Riemersma

Dear Trevor,
perhaps I don't understand you [I'm Dutch;-)], but when the user enters the field the placeholder text disappears. When the user types some text in the field the color of the text is black (in my case) and only that text is visible. Which means the user typed in some text. I agree that you need a closeField message as well, for example when the user typed in some text and then deleted it and tabbed to another field. But as far as I know there is no misunderstanding whether the text was entered by the user or it was the prompt.

Trevor DeVore

@Jan - there is no confusion from the user perspective. But how does your code know if the text is the prompt text or what the user entered? You have to check somehow. With the behavior you can simply do this:

put the uText of field "MyFieldWithPrompt" into theUserEnteredText

If the prompt text is still visible (e.g. the user never typed anything or the user typed something but then later deleted what they entered and the prompt text reappeared) then the variable theUserEnteredText will be empty rather than "Search".

What would your code look like that gets the text of the field?

if the foregroundColor of field "MyFieldWithPrompt" is black then
# user entered text
put the text of field "MyFieldWithPrompt" into theUserEnteredText
else
put empty into theUserEnteredText
end if

Also, in your code, what if the user typed in "Search", left the field and then came back to it? The text they typed would disappear.

So while your example works in a very basic sense, it requires more code elsewhere and can break during user interaction.

Make sense?

Jan Riemersma

@Trevor - Oops, I think you're right. Thanks for your explanation. It helps me a lot!

Add your comment

E-Mail me when someone replies to this comment