JS设置控件焦点

目录:

1. 描述

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

2. 思路

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

3. 操作步骤

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

4.1 PC端预览效果

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
点击下载模板

附件列表


主题：
标签： 已验证 9.0验证

文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）