将焦点设置为 JSF 的更改值侦听器之后的下一个输入元素

set focus to next input element after jsf's change value listener

本文关键字：侦听器 之后 下一个 元素 输入 设置 焦点 JSF      更新时间：2023-09-26

在我们的一个前端屏幕中，我们有以下布局，如下所示 

<h:outputLabel for="firstName" value="first name" />
<h:inputText styleClass="required" id="firstName"  size="30"  maxlength="30" 
        value="#{ownershipStoreInfoController.form.ownerFirstName}" onchange="submit()"
        valueChangeListener="#{ownershipStoreInfoController.useOwnerInfo}">
        <e:validateRegExpr pattern="([A-Z,a-z,0-9,%@()#&amp;,.;:_'$'/'-'{'}'[']''''s*]{1,30})?" />
</h:inputText>

<h:outputLabel for="lastName" value="last name" />
<h:inputText styleClass="required" size="30" id="lastName" maxlength="30"
                    value="#ownershipStoreInfoController.form.ownerLastName}"
                    onchange="submit()"
                    valueChangeListener="#{ownershipStoreInfoController.useOwnerInfo}">
                    <e:validateRegExpr pattern="([A-Z,a-z,0-9,%@()#&amp;,.;:_'$'/'-'{'}'[']''''s*]{1,30})?" />
</h:inputText>

当我在输入字段"firsName"中输入值并输入"Tab"时，更改侦听器被调用，一切看起来都很好。

但问题是因为它进行服务器调用并返回屏幕。 光标对下一个输入框（"姓氏"）的焦点不起作用，焦点也消失在名字字段上。 它工作的唯一方法是我手动将鼠标放在下一个字段中。

我需要焦点才能进入字段（"姓氏"）。 在我更改"名字"中的值并单击选项卡按钮后。

任何帮助不胜感激。

终于我找到了解决方案。 在我的值变化侦听器中。 我在最后添加了这句话。

if(event.getComponent().getId().equalsIgnoreCase("COMPONENT ID FIRST")){
        String jsStatement = "document.getElementById(''" + ("COMPONENT ID SECOND")+ "'').focus();";
        SESSIONCLASS.setBodyOnload(jsStatement);        
    }

在上面的代码中，"组件 ID 优先"是触发值更改侦听器的当前组件，"组件 ID 第二"是必须设置焦点的下一个组件。

SESSIONCLASS

是 session 中可用的类，"setbodyonload" 是一个接受字符串作为参数的字符串。 确保你在 SESSIONCLASS 中有如下 getter 和 setter 方法。

public String getBodyOnload() {
    return bodyOnload;
}
public void setBodyOnload(String bodyOnload) {
    this.bodyOnload = bodyOnload;
}

最后，我在我的 JSP 页面中放了一个 scriplet，如下所示。

<%
    String bodyAttributes = "";
    String onload = SESSIONCLASS.getBodyOnload();
    if (onload != null) 
    {
        bodyAttributes = " onload='""+onload+"'"";
        SESSIONCLASS.setBodyOnload(null); // clear bodyOnload
    }
%>

所以这里当页面加载后更改值侦听器。 执行 scriplet 让焦点放在所需的组件上。

相关文章：