JS给参数控件添加水印文字

1.1 问题描述

制作报表时，有时需要为控件添加水印文字，给予用户输入提示，编辑控件后水印内容消失。如下图所示：

为控件添加水印可直接在控件属性面板中添加，也可以通过 JS 添加。本文介绍通过 JS 给控件添加水印文字。

1.2 实现思路

 给控件增加「初始化后」事件，事件内容为初始化后，为控件添加水印文字。

2.1 准备模板

1）新建模板，点击菜单栏「模板>模板参数」，添加一个模板参数 p1，如下图所示：

2）将参数 p1 添加到参数面板中，设置 p1控件类型为「文本控件」，如像下图所示：

2.2 添加事件

给「文本控件 」p1 添加一个「初始化后」事件，实现添加水印的效果。如下图所示：

JavaScript 代码如下：

var p1 = this.options.form.getWidgetByName('p1');//获取控件
p1.setWaterMark('水印文字');//添加水印文字

2.3 预览效果

2.3.1 PC 端

保存模板，点击「分页预览」，效果如 1.2 节所示。

2.3.2 移动端

保存模板，选择「移动端预览」，效果如下图所示：

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\20-JS给参数控件添加水印文字-方法一.cpt

点击下载模板：20-JS给参数控件添加水印文字-方法一.cpt