历史版本9 :JS设置控件焦点 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

在做填报报表时，在某些特定情况下需要设置某个控件为焦点并可编辑，如下图的示例，文本框默认为不可用状态，如何实现点击编辑按钮使文本框变为可用并设置为焦点可编辑状态？

222

2. 思路编辑

给按钮增加点击事件使得文本控件可用

3. 操作步骤编辑

3.1 模板属性设置

点击模板>模板Web属性>填报页面设置，选择为该模板单独设置，勾选直接显示控件：

222

3.2 报表样式

如下所示添加文本控件和按钮控件：

222

文本控件，设置控件名为test，默认不可用：

222

按钮控件，设置按钮名称为编辑，点击事件编辑，添加“点击”事件，如下所示：

222

3.3 js代码设置

1）方法一

编辑点击事件，添加下面的JS代码：

var self =contentPane.getWidgetByName("test"); self.setEnable(true); var myFocusID = setInterval( function() { self.editComp.focus(); }, 20);

js代码说明：

var self =contentPane.getWidgetByName("test");   //获取文本控件，test为文本控件的控件名

self.setEnable(true);   //设置文本控件为可用

self.editComp.focus();   //将文本控件设置为焦点

注：方法一必须勾选直接显示控件，否则只能实现可编辑而不会自动成为焦点
2）方法二
或者使用下面的JS代码：
var self =contentPane.getWidgetByName("test"); self.setEnable(true); var cell = contentPane.curLGP.getTDCell(1,1); setTimeout( function() { contentPane.curLGP.selectTDCell(cell); setTimeout( function(){ contentPane.curLGP.editTDCell(cell); },20); },20)

js代码说明：

var cell = contentPane.curLGP.getTDCell(1,1); //获取焦点所在的单元格对象，getTDCell(1,1)即B2单元格

contentPane.curLGP.selectTDCell(cell);   //选择单元格

contentPane.curLGP.editTDCell(cell);/   //编辑单元格，即聚焦单元格

保存模板，点击填报预览即可查看效果，点击编辑按钮使文本框变为可用并设置为焦点可编辑状态，如上图。

4. 预览效果编辑

4.1 PC端预览效果

222

4.2 移动端预览效果

注：此JS不支持移动端使用

5. 已完成模板编辑

1）方法一
模板效果在线查看请点击：JS设置控件焦点方法一.cpt
已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\25-JS设置控件焦点方法一.cpt
点击下载模板
2）方法二
模板效果在线查看请点击：JS设置控件焦点方法二.cpt
已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\25-JS设置控件焦点方法二.cpt
点击下载模板