Textfield Similar to Google Search Toolbar - Text Hides/Appears Upon Entry/Exit

[Former Community Member]

I am trying to get an object [text field, numeric field] to behave in a similar manner to that of the Google search toolbox that is embedded in Firefox or Safari.



When the form opens, I want it to display text in the field to describe the kind of data that should be entered into it [name, address, etc.]. When the client selects the field, I want the text to disappear immediately so that the field becomes blank. If the client chooses to enter characters or numbers into the field, the original text will be replaced by this new text. If the client chooses to leave the field without entering anything, the original text will reappear.



I am new to LiveCycle and appreciate any help you can give me. My knowledge of javascript is basic, mostly cut-and-paste. If someone can create an example that has one text field that behaves in this manner, I think I should be set. Any notes or explanation on how it works and why script goes into certain events is also great. I'm really enjoying learning how to use this program, although I think I'm losing some hair over it!

[Former Community Member]

Zugzwang,



This should be relatively easy to do.



In your text or numeric object:



1. Open the Object palette and then the Value Tab. In the Default field enter your instructions as to what you want the client to enter in the object.



2. In the enter event of the object place the follwing javascript:



this.rawValue = "";



3. In the exit event of the same object place the following javascript:



if (this.rawValue == null) {

this.rawValue = "Text";

}



The "Text" would be the same text you entered in the Default field in the Value Tab.



Rick Kuhlmann

Tech-Pro

[Former Community Member]

Amazing! Thank you for the quick response!



I now see another feature I'd like to include :( I could live without it if it's too difficult to implement, but it would be good to know how to do.



When the client enters text or numbers into the object and then leaves the object, everything is good. But, if the client returns to the object, it resets the client-entered data. Is there an easy way to keep the client-entered data, so that they would then have to manually delete it?



Thanks!

[Former Community Member]

I would like like to know this information to. Anyone.....

[Former Community Member]

Zugzwang,



Just replace the js with the following:



enter event:

if (this.rawValue == "This is the default value") {

this.rawValue = "";

}



exit event:

if (this.rawValue == null) {

this.rawValue = "This is the default value";

}

[Former Community Member]

awesome!

thanks

[Former Community Member]

now only if they would reply to my problem :-/

[Former Community Member]

I was able to get the script to work, however only if I remove some of the other functionality in the object. I am hoping to get the form's required objects color coded [blue if incomplete, green if complete].



The page object is "infoDoctor", the subform is "nameDoctor", and the object is "nameFirstDoctor". The object has a custom appearance; Borders are solid, white, corners rounded; Background fill is solid, white. Hard to explain all of this clearly. I can email you the PDF if it is easier.



Here is the script that I'm using...



enter event:



if (this.rawValue == "First Name") // Default text in object.

{

xfa.resolveNode("nameDoctor.nameFirstDoctor.ui.#textEdit.border.fill.color").value = "153,204,226"; // Turn the object blue.

border.edge.presence = "hidden"; // Hide the border.

this.rawValue = "";

}



exit event:



if (this.rawValue == null) // Nothing entered.

{

xfa.resolveNode("nameDoctor.nameFirstDoctor.ui.#textEdit.border.fill.color").value = "153,204,226"; // Keep the object blue.

border.edge.presence = "hidden"; // Hide the border.

this.rawValue = "First Name";

}

else // Valid entry.

{

xfa.resolveNode("nameDoctor.nameFirstDoctor.ui.#textEdit.border.fill.color").value = "102,188,90"; // Turn the object green.

border.edge.presence = "hidden"; // Hide the border.

}



For some reason this does not work.



Also, I am having trouble removing the object's fillable area background color in the prePrint event. This is what I want to happen when printing:



If the object is filled in by the user, I want the color to disappear and the text to remain. If the object is not filled in and still has the default text, I want the color and text to disappear.



Post print, I want the color and text to return to the previous values.



This is the script that I used...



prePrint event:



if (this.rawValue == "First Name")

{

xfa.resolveNode("nameDoctor.nameFirstDoctor.ui.#textEdit.border.fill.color").value = "255,255,255";

border.edge.presence = "hidden";

this.rawValue = "";

}

else

{

xfa.resolveNode("nameDoctor.nameFirstDoctor.ui.#textEdit.border.fill.color").value = "255,255,255";

border.edge.presence = "hidden";

}



PostPrint event:



if (this.rawValue == "")

{

xfa.resolveNode("nameDoctor.nameFirstDoctor.ui.#textEdit.border.fill.color").value = "153,204,226";

border.edge.presence = "hidden";

this.rawValue = "First Name";

}

else

{

xfa.resolveNode("nameDoctor.nameFirstDoctor.ui.#textEdit.border.fill.color").value = "102,188,90";

border.edge.presence = "hidden";

}



Woo! Long post! Sorry if it is too much. I'm just stressed and excited and delirious. Your help is greatly appreciated!