Adding Ghost Text to LiveCycle Designer forms

[paulb14594402]

Hi to all

i am new to coding and have been set a task of setting up a pdf form, but it requires ghost text to guide the users but also to allow them to type normal text when they fill in the form, so greyed out text for the ghost and black text for the completed field, but i have very little experience with coding and could do with some advice below is an examle of the text field i have in and would love to know what it is that i have to add to get this to work.

<field name="KnownMedicalConditions" y="76.2mm" x="66.675mm" w="127mm" h="6.35mm">
               <ui>
                  <textEdit>
                     <border presence="hidden">
                        <?templateDesigner StyleID aped0?></border>
                     <margin/>
                  </textEdit>
               </ui>
               <font typeface="Calibri" size="9pt">
                  <fill>
                     <color value="153,153,153"/>
                  </fill>
               </font>
               <margin topInset="0mm" bottomInset="0mm" leftInset="1mm" rightInset="1mm"/>
               <para vAlign="middle"/>
               <caption>
                  <font typeface="Calibri" size="9pt"/>
                  <para vAlign="middle"/>
               </caption>
               <validate>
                  <message>
                     <text name="formatTest"/>
                  </message>
               </validate>
               <assist>
                  <speak disable="1"/>
               </assist>
            </field>
            <?templateDesigner expand 1?></subform>
         <?templateDesigner expand 1?></subform>
      <subform w="576pt" h="756pt">
         <breakBefore targetType="pageArea" startNew="1"/>
         <draw name="G30" x="146.05mm" w="31.75mm" h="12.7mm" y="3.228mm">
            <value>

[Magus069]

Hi there,

I suggest you do not edit XML to put a ghost text for your textfield
instead modify its properties using the object's field properties..

In Design View, select the textfield and go in Object > Field Palette > Patterns...

Within Pattern Display, check Allow Empty's box, and enter the ghost text in the textbox below..

This will act as ghost text, if you want to change font's color to grey when empty,

you should initially set the font's color to grey,

when you enter the field change it back to black and

if you exit the field and the field's value is null, reset the color to grey.

I hope this will help!

[stephenf8734174]

Hi, just found this answer. Great tip, exactly what I was looking for. Thanks.

[tarekahf]

Use the code sample below to implement Ghost Field (placeholder):

I hope this will be helpful.

//form1. # subform[0].TextField1::initialize - (JavaScript, client)
myTools.initGhost(this);
//form1. # subform[0].TextField1::enter - (JavaScript, client)
myTools.enterGhost(this);
//form1. # subform[0].TextField1::exit - (JavaScript, client)
myTools.exitGhost(this);
//form1. # variables[0].myTools - (JavaScript, client)
//Ghost field processing (placeholder)
function initGhost(theFld, ghostText) {
 ghostText = ghostText || theFld.assist.toolTip.value;
 theFld.format.picture = "null{'" + ghostText + "'}";
 exitGhost(theFld);
}
function enterGhost(theFld) {
 var oFill = xfa.form.createNode("fill");
 theFld.font.nodes.remove(theFld.font.fill);
 theFld.font.nodes.append(oFill);
 theFld.font.posture = "";
}
function exitGhost(theFld) {
 var oColor;
 var oFill;
 if (theFld.isNull) {
  oFill = xfa.form.createNode("fill");
  oColor = xfa.form.createNode("color");
  oColor.value = "192,192,192";
  oFill.nodes.append(oColor);
  theFld.font.nodes.remove(theFld.font.fill);
  theFld.font.nodes.append(oFill);
  theFld.font.posture = "italic";
 }
}

Tarek

[holocronster]

thanks! it's awesome!