JS Add Watermark Text for Parameter Widget

1.1 Requirement

How to add a text watermark as a hint for input field, which will be removed automatically when user types something in it.

1.2 Solution

Solution 1: Add an After Initialization event to the Text widget. Once the widget has been initialized, add a text watermark.

Solution 2: Add a text watermark directly in the parameter pane.

2.1 Steps

1) Click [Menu Template]-[Template Parameter] to add a template parameter and name it p1:

2) Add p1 into the parameter pane:

2.2 Method 1

Bind p1 to the Text widget and name the widget p1 as well.  Add an After Initialization Event and configure settings as shown below:

Input the following JS codes:

var p1 = this.options.form.getWidgetByName('p1');//Fetch the widget
p1.setWaterMark('Watermark Text');//Add a text watermark

Click Save and Preview to see the effect.

2.3 Method 2

In the right-hand pane, click the Attribute tab to configure watermark settings.

2.4 Preview

Save the template and click [Pagination Preview]. The preview effect is shown as below:

2.4.1 Method 1

2.4.2 Method 2

Add Watermark Text to Parameter Widget .cpt