使用 JavaScript / RichFaces 将焦点设置到表单元素答案

【问题标题】：Set focus to a form element using JavaScript / RichFaces使用 JavaScript / RichFaces 将焦点设置到表单元素
【发布时间】：2015-11-05 21:39:22
【问题描述】：

我正在使用 JSF 1.2 和 RichFaces。我有一个要求，单击命令按钮 (<h:commandButton>) RichFaces 数据表将显示 3 组行，这工作正常，但问题是我需要在数据表的文本框中设置焦点不工作。请找到我正在使用的示例代码。

命令按钮：

<a4j:commandButton immediate="true"
                   action="#{bean.addTomethod}"
                   reRender="myform" 
                   oncomplete= "setFocusOnRichComponenet();" 
                   rendered="true">
</a4j:commandButton>

JavaScript 代码：

function setFocusOnRichComponenet(){
    document.getElementById("myform:richDataTableList:0:richTextBoxID").focus();
}

这里，myform:richDataTableList:0:richTextBoxID 是我要关注的组件的id。

【问题讨论】：

您是否遇到任何 Javascript 错误？在 oncomplete 属性中，您已将函数名称指定为 setFocusOnRichComponent，但 javascript 函数名称为 setFocusSPP。您可以通过保持函数名称相同来检查吗？
Sorry Dinesh 是拼写错误，函数名相同。即使它不工作

标签： javascript jsf richfaces jsf-1.2 ajax4jsf

【解决方案1】：

当 id 是动态生成时，有时尝试使用 document.getElementById 引用可能是错误的，因为您必须知道完整的 id。

更简单的方法是使用 RichFaces 方法 clientId('elementName') 这将基本上解析确切的 id，因此您不必按 tableName[].Element[] 格式引用。

因此，对于您的场景，您可以替换 javascript 函数，如下所示：

function setFocusOnRichComponenet(){
    document.getElementById("#{rich:clientId('myTextBox')}").focus();
}

其中 'myTextBox' 是您尝试引用的文本框的名称

【讨论】：

【解决方案2】：

在输入中添加一个类：

<h:inputText id="test" class="testClass"/>

在函数中使用 jQuery 按类设置焦点：

function setFocusOnRichComponenet(){
    jQuery(".testClass").focus();
}

【讨论】：