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

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

3.1 模板属性设置

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

3.2 报表样式

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

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

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

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.1 PC 端预览效果

4.2 移动端预览效果

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

1）方法一

模板效果在线查看请点击：JS 设置控件焦点方法一.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\25-JS设置控件焦点方法一.cpt

点击下载模板

2）方法二

模板效果在线查看请点击：JS 设置控件焦点方法二.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\25-JS设置控件焦点方法二.cpt

点击下载模板