如何将焦点设置到重复控件内的编辑框?

2024-04-25

我想将焦点设置为+将光标置于重复控件中的编辑框(最后一个)。重复位于面板 (panelRep) 内。然后我在面板外面有一个按钮。

这是几乎可以工作的按钮的客户端代码。焦点已设置(字段周围的蓝色边框),但光标未放置在字段中。 用户仍必须单击该字段才能写入输入。

Example without focus:
without focus

Example with focus:
with focus

将焦点设置到最后一个编辑框的按钮的客户端代码,其中 id 包含字符串 inputKode:

try {
var el = dojo.query('div[id*="inputKode"]');
var node = el[el.length-1];
setTimeout(function() { node.focus(); }, 500);
//node.focus();
} catch (e) { } 

panelRep 的代码:

<xp:panel id="panelRep">
            <xp:repeat id="repeat1" rows="12" var="row" indexVar="idx"
                value="#{view1}" repeatControls="false">
                <xp:panel id="panelLinje">
                    <xp:this.data>
                        <xp:dominoDocument formName="frmPBudKodeVerdi"
                            var="dsdoc" action="editDocument" computeWithForm="both"
                            documentId="#{javascript:row.getUniversalID();}">                           
                        </xp:dominoDocument>
                    </xp:this.data>
                    <xp:table style="width:800.0px">
                        <xp:tr>
                            <xp:td style="width:100px">
                                <xp:inputText id="inputKode"
                                    value="#{dsdoc.KodeNr}" style="width:62px">
                                    <xp:this.attrs>
                                        <xp:attr name="tabindex"
                                            value="#{javascript:return idx + '1';}">
                                        </xp:attr>
                                    </xp:this.attrs>
                                    <xp:typeAhead mode="partial"
                                        minChars="1" var="lukey" valueMarkup="true" id="typeAhead1">
                                        <xp:this.valueList><![CDATA[#{javascript://var type = compositeData.type;
                                        return TypeAheadKode2(sessionScope.type,lukey);
                                        }]]></xp:this.valueList>    
                                    </xp:typeAhead>
                                    <xp:eventHandler event="onchange"
                                        submit="true" refreshMode="partial" refreshId="panelLinje">
                                        <xp:this.action><![CDATA[#{javascript:onChangeKode();}]]></xp:this.action>
                                    </xp:eventHandler>
                                </xp:inputText>                             
                            </xp:td>
                            <xp:td style="width:450px">
                                <xp:inputText id="inputNavn"
                                    value="#{dsdoc.KodeNavn}" style="width:440px"
                                    readonly="true">
                                </xp:inputText>
                            </xp:td>
                            <xp:td style="width:60px">
                                <xp:inputText id="inputNorm"
                                    style="width:45px" value="#{dsdoc.NormPrProd}"
                                    rendered="#{javascript:viewScope.visNorm}" readonly="true">
                                    <xp:this.attrs>
                                        <xp:attr name="tabindex"
                                            value="#{javascript:return idx + '2';}">
                                        </xp:attr>
                                    </xp:this.attrs>
                                    <xp:this.converter>
                                        <xp:convertNumber
                                            type="number">
                                        </xp:convertNumber>
                                    </xp:this.converter>
                                </xp:inputText>
                            </xp:td>
                            <xp:td style="width:50px">
                                <xp:inputText id="inputAntall"
                                    style="width:45px" value="#{dsdoc.NormAntall}"
                                    rendered="#{javascript:viewScope.visNorm}">
                                    <xp:this.converter>
                                        <xp:convertNumber
                                            type="number">
                                        </xp:convertNumber>
                                    </xp:this.converter>
                                    <xp:eventHandler
                                        event="onchange"
                                        submit="true"
                                        refreshMode="partial"
                                        refreshId="inputTimer">
                                        <xp:this.action><![CDATA[#{javascript:onChangeAntall()}]]></xp:this.action>
                                    </xp:eventHandler>
                                    <xp:this.attrs>
                                        <xp:attr name="tabindex"
                                            value="#{javascript:return idx + '3';}">
                                        </xp:attr>
                                    </xp:this.attrs>
                                </xp:inputText>
                            </xp:td>
                            <xp:td
                                style="width:50px;text-align:right">
                                <xp:inputText id="inputTimer"
                                    value="#{dsdoc.Timer}" style="width:45px;text-align:right">
                                    <xp:this.converter>
                                        <xp:convertNumber
                                            type="number">
                                        </xp:convertNumber>
                                    </xp:this.converter>
                                    <xp:this.attrs>
                                        <xp:attr name="tabindex"
                                            value="#{javascript:return idx + '4';}">
                                        </xp:attr>
                                    </xp:this.attrs>
                                </xp:inputText>
                            </xp:td>
                            <xp:td>                             
                            </xp:td>
                        </xp:tr>
                    </xp:table>
                    <xp:eventHandler event="onClientLoad" submit="true"
                        refreshMode="norefresh">
                    </xp:eventHandler>
                </xp:panel>
            </xp:repeat>
</xp:panel>

2012 年 9 月 22 日更新:

@MarkyRoden - 感谢您为我指明了正确的方向。

改进 dojo.query 选择器后,我最终得到了 1 行代码。

var el = dojo.query('div[id*="inputKode"] .dijitInputField > input').at(-1)[0].focus(); 



原帖:

我发现被设置焦点的元素是not一个输入元素。 元素 ID 开头为widget_

E.g widget_view:_id1:_id2:_id3:repeat1:8:inputKode如果重复中有 8 行

然后我发现该元素的nodeType是DIV通过查看 element.innerHTML,我发现它有多个子元素。

我尝试使用 element.querySelector 或 element.querySelectorAll,但无法让它们为该元素工作,因此我最终循环遍历 element.childNodes。 不是很漂亮,但它现在可以工作了..

我确信通过向 dojo.query 选择器添加元素或使用 jquery 可以做得更好。以后还得研究一下..

好吧,这是我在 CC 的 onClientLoad 事件中放入的代码:

var el = dojo.query('div[id*="inputKode"]');
var node = el[el.length-1];
node.focus();

var activeElementId = document.activeElement.id;
var activeElement = dojo.byId( activeElementId );
var kids = activeElement.childNodes;

for(var i=0; i < kids.length; i++)
{
    if(kids[i].className == 'dijitReset dijitInputField dijitInputContainer')
    {
    var elementDiv = kids[i];
    var elementDivKids = elementDiv.childNodes;

    for(var j=0; j < elementDivKids.length; j++)
    {
        var elementInput = elementDivKids[j];
        elementInput.focus();
    }
    } 
}

问候, 彼特

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将焦点设置到重复控件内的编辑框? 的相关文章

随机推荐

  • Swift - NSDate - 删除部分日期

    我有一个以下格式的日期2015 02 22T20 58 16 0000 为了将其转换为 NSDate 我找到了以下解决方案 var df NSDateFormatter df dateFormat yyyy MM dd T HH mm ss
  • 数组仅添加重复值

    当我打印数组的内容时 它似乎会使用最后输入的命令覆盖每个元素 typedef struct int argc char argv 10 char myArray 80 size t size Command 内部主要 Command cmd
  • 谷歌采访:找到多边形的最大和[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 给定一个多
  • 如何在 SQL Server 中生成并手动插入唯一标识符?

    我正在尝试在表中手动创建一个新用户 但发现如果代码不抛出异常 就不可能生成 UniqueIdentifier 类型 这是我的例子 DECLARE id uniqueidentifier SET id NEWID INSERT INTO db
  • vue/vuetify 模态模式或最佳实践设计

    在我正在开发的应用程序中 我们有很多模态 每个模态包含少量数据 通常是 2 3 个字段 有时是复选框 列表等 问题是当组件关闭时如何从内部重置 销毁组件 造成这种情况的原因有两个 1 不必清除每个模式上的各个数据字段 2 当第二次打开模式时
  • Eclipse(在 Ubuntu 上)没有 jsp、html 和其他 Web 文件模板

    我使用 Synaptic Package Manager Ubuntu 9 10 安装了 Eclipse 但是 我的 Eclipse 没有任何 HTML 模板 在 新建 对话框中 或 JSP 模板 我该如何修复它 以便我在那里拥有一些 HT
  • Python根据for循环索引创建变量[重复]

    这个问题在这里已经有答案了 我正在尝试为 for 循环的每次迭代创建变量 对于范围 10 内的 i x i abc 这样我就可以得到 x1 x2 x3 x4 x10 都等于 abc 有人知道该怎么做吗 谢谢 你不应该这样做 将你的值存储在d
  • 使用 Base64 和 JSON 上传大图像

    我正在使用此功能将图像上传到服务器JSON 为此 我首先将图像转换为NSData然后到NSString using Base64 当图像不是很大时 该方法工作正常 但当我尝试上传 2Mb 图像时 它会崩溃 问题是服务器没有收到我的图像 即使
  • 使用 Appcompat v7 的抽屉式导航 - ?android:attr 标签的问题

    我在我的项目中使用操作栏和导航抽屉 使用 appcompat v7 和 v4 我已经添加了 appcompat v7 和资源 以下是我的导航抽屉列表的文本视图 直接取自位于以下位置的 Android 示例应用程序 创建抽屉式导航 http
  • C#:通过反射检索和使用 IntPtr*

    我目前正在编写一些代码 这些代码反映了从调用本机 dll 中编组回来的结构 某些结构包含指向以 null 结尾的指针数组的 IntPtr 字段 这些领域需要特殊处理 当反映结构时 我可以识别这些字段 因为它们是由自定义属性标记的 以下说明了
  • ant-找不到符号@Test

    我正在尝试编译以下仅包含一个函数的类 公共类测试注释 Test public void testLogin System out println Testing Login 当我将文件作为 JUNIt 运行时 它可以工作 但是当我尝试从 b
  • 计算 a*a mod n 且不溢出

    I need to calculate a a mod n but a is fairly large resulting in overflow when I square it Doing a n a n n doesn t work
  • 树莓派蓝牙4.0连接

    我正在尝试使用 CoreBluetooth 蓝牙 4 0 通过 iPhone 连接到 Raspberry Pi 我已经发现了该设备并使用以下代码发出连接请求 if peripheral self foundPeripheral NSLog
  • Javascript ResizeObserver 意外触发

    Why the ResizeObserver类总是首先执行处理程序observe 尝试在 Chrome 开发工具上执行以下代码 new ResizeObserver gt console log resize detected observ
  • 从 asp.net 中的 dataSet 获取单个值

    我正在执行查询以从 tbl message 表获取 Title 和 RespondBY 我想在对转发器进行数据绑定之前解密标题 在进行数据绑定之前如何访问标题值 string MysqlStatement SELECT Title Resp
  • jQuery 显示/隐藏/切换有效,但没有保持应有的状态 - 它恢复到原始状态

    我尝试使用 jQuery 显示 隐藏常见问题解答 这个想法是列出所有问题 只有当用户想要查看答案时 他们才会单击问题 看起来像链接 然后答案就会变得可见 它有点有效 只不过一旦单击答案就会恢复到其原始状态 在这种情况下 这意味着当我单击问题
  • 对一列进行唯一约束,排除其他列中具有相同值的行

    我想向列添加唯一键value但我必须忽略列中具有相同值的行value and header id 例如 考虑这个表 id header id value 1 1 a 2 1 a 3 2 a 因此 第 1 行和第 2 行指向同一个对象 并且唯
  • 您可以在不同的 OSGi 包中拥有 JSF 自定义组件吗?

    有人同时使用过 OSGi 和 JSF 吗 我问这个问题是因为 JSF 使用类加载器魔法来查找自定义组件 来自教程 重点是我的 这个配置文件最终会 是 META INF faces config xml 中 代表此的 jar 文件 成分 JS
  • 如何在没有 Intent 的情况下以编程方式拨打电话

    我是 Android 新手 我想在不使用intent 我知道这段代码 Intent intent new Intent Intent ACTION CALL intent setData Uri parse tel bundle getSt
  • 如何将焦点设置到重复控件内的编辑框?

    我想将焦点设置为 将光标置于重复控件中的编辑框 最后一个 重复位于面板 panelRep 内 然后我在面板外面有一个按钮 这是几乎可以工作的按钮的客户端代码 焦点已设置 字段周围的蓝色边框 但光标未放置在字段中 用户仍必须单击该字段才能写入