Place holders (ghost text) in Form text fields

[DaLe Zki]

Good morning,

I am looking for a acrojs script to display a Place Holder or "ghost test" in a Form's text field.

1) When user of the form puts cursor in the Form field,

the Place Holder text is removed.

When the cursor is moved out of the field,

and should the field remain empty, the Place Holder text returns.

2) same as above but use MouseOver, MouseOut.

Using Acrobat X Pro

Thanks,

Dale

[George_Johnson · Accepted solution]

For #1, use a custom Format script:

if (!event.value) event.value = "Message text goes here.";

The is no mouse over event for text fields.

[DaLe Zki]

Hi George,

I really appreciate your quick reply.

The text's field name is "name".

I have a validation script within it's properties that is working well.

Before I use the above script... my novice senses tell be there is

other surrounding code required.

For clarity and my documentation;

Where will I place this code (i.e. using the text field properties / Script editor.. if so where in said script)?

What other surrounding code is required?

Thanks so much for your time today...

Dale

[George_Johnson]

No other code is needed. As I mentioned, it's a custom Format script, so select the Format tab and select Custom for the format type and you should see where to enter the code.

[DaLe Zki]

Prefect, thank you.

Noted: use the Format tab, not the Actions tab within the Text field's properties.

~ ~

Would specific formatting of this place holder ( color / size) be another

custom Format script or can a reference be found in the JS for Acrobat API manual?

I used the on Focus / on Blur events in the Action Tabs using these scripts (noted below),

but soon realized it was Form Text Field specific and did not effect the "place holder" attributes specifically.

// for On Focus event

event.target.textColor = color.black;

// for On Blur event

event.target.textColor = color.ltGray;

I welcome you thoughts, resources or coding snippets.....

Again - Thanks !

[George_Johnson]

You can change the text color in the on Focus event, but the change won't take effect until the field loses the focus. So if it starts off grey and the code changes it to black, the text that the user types will be grey, until the field loses the focus and it changes to black.

A different approach is to place what you're calling the placeholder text on the page as regular page contents and make it grey. You can then use a custom Validate script that controls the background color of the text field, something like:

// Custom Validate script

event.target.fillColor = event.value ? color.white : color.transparent;

In addition to the following On Focus script:

// On Focus script for text field

event.target.fillColor = color.white;

[DaLe Zki]

I'll give that a try and see which version works best......

Thanks again

[DaLe Zki]

Just  a quick not, your tip in post #5 is very unique.

It reminds me of "layering" in Photoshop.

In this case the Form Text Field is in front of typed text field.

Your script then plays witht the Form field's background.....

Very Nice !!

D-

[George_Johnson]

I'm glad you got what I meant, because I forgot to add that you're supposed to place the text field over the placeholder text.

If you don't want the placeholder text to print, you can either place it on a non-printing layer, or place it in a non-printing, read-only text field, and place the active field on top. For stacked fields, the tab order determines the z-order and thus which one is on top.

[Mei Ping-12]

Set the field's default value to the text you want to display by default and then apply the following code to the field's On Focus and On Blur events, resp.:

// On Focus script:
if (event.target.value==event.target.defaultValue) {
   event.target.value = "";
   event.target.textColor = color.black;
}

// On Blur script:
if (event.target.value=="") {
   event.target.value = event.target.defaultValue;
   event.target.textColor = color.ltGray;
}

When the user clicks into the field, the default value will disappear and the field will be blank. If they don't enter anything (or delete what was there) and then exit the field, the default value will be shown once more.

The third line of code in each block is an optional feature that will change the field's text color to a light gray when it shows the default value or to black when an actual value is filled-in by the user.

This is provided from this link https://answers.acrobatusers.com/Is-add-instructional-text-text-field-disappear-clicked-q195078.aspx

Hope this will help someone.

[erict72529761]

Hi George,

I am working on interactive PDF and used the suggested JS to create the ghost text but I have issues when the filed is filled the content does not appear in the box. I wanted to know if there is a way to make content replace the ghost text

[Guest]

Hi George_Johnson

I am also having the same requirement in my interactive adobe form.Could you please suggest me, if the same scenario can be possible using java script.

Regards,

Suneel.Uggina.

[try67]

This was answered above.

[Nikki5D9D]

This is helpful and worked perfectly for me -  if (!event.value) event.value = "Message text goes here.";

I read below but was unable to understand if it was possible to change font size to 9pt for example. I see the code for color, but font would be great.

if (!event.value) event.value = "MMM YYYY"; is what I currently have. Can you modify this to include font adjustment? Any assistance would be greatly appreciated. I am not familiar with Javascript but I am trying!

Thanks so much.