10 Replies Latest reply: Jan 22, 2015 6:54 PM by Joucads RSS

    Place holders (ghost text) in Form text fields

    DaLe Zki Community Member

      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

        • 1. Re: Place holders (ghost text) in Form text fields
          George_Johnson CommunityMVP

          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.

          • 2. Re: Place holders (ghost text) in Form text fields
            DaLe Zki Community Member

            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

            • 3. Re: Place holders (ghost text) in Form text fields
              George_Johnson CommunityMVP

              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.

              • 4. Re: Place holders (ghost text) in Form text fields
                DaLe Zki Community Member

                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 !

                • 5. Re: Place holders (ghost text) in Form text fields
                  George_Johnson CommunityMVP

                  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;

                  • 6. Re: Place holders (ghost text) in Form text fields
                    DaLe Zki Community Member

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

                     

                    Thanks again

                    • 7. Re: Place holders (ghost text) in Form text fields
                      DaLe Zki Community Member

                      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-

                      • 8. Re: Place holders (ghost text) in Form text fields
                        George_Johnson CommunityMVP

                        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.

                        • 9. Re: Place holders (ghost text) in Form text fields
                          DanFlamma1

                          George,

                           

                          You might not be getting your emails but I know that you are out here.  Are you not interested in finishing what you started????

                           

                          Dan

                          • 10. Re: Place holders (ghost text) in Form text fields
                            Joucads

                            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-q1 95078.aspx

                             

                            Hope this will help someone.