Primefaces从bean设置焦点

3
如果我想将焦点设置到未能通过验证的字段上,我可以使用<p:focus context='@form'/>来实现这个简单的情况。但我的问题是,并不是所有的验证都可以在前端进行。例如,当用户提交表单时,Bean将检查数据库中是否已存在该用户名,如果存在,则将错误消息设置为该字段并将焦点设置为它。在这种情况下,<p:focus />标记不再起作用,因为它实际上已经通过了前端验证。
我发现这个答案并尝试实现它,我想说它只部分地起作用。为什么?因为如果您通过声明一个变量来手动设置焦点,它会覆盖<p:focus context='@form'/> 标签。当这个焦点标记失去其功能时,如果有任何前端验证失败,它将不再把焦点带到那个特定的字段。
我尝试使用widgetVar来执行焦点。我为我的字段声明了一个widgetVar名称,比如widgetVar='username',然后在托管bean中,我使用以下代码来聚焦它:
RequestContext.getCurrentInstance().execute("PF('username').focus()");

很遗憾,它并不起作用。不确定execute()是否使用这种方式不起作用,或者语句存在问题。抱歉我的英语不好,希望得到任何帮助或建议。


你的Primefaces版本是什么? - Jorge Campos
@JorgeCampos Primefaces 6.1 - Newbie
1个回答

4

PrimeFaces 6.3及以上版本

正如在评论中所述,一个实用方法在PrimeFaces中可用:

PrimeFaces.current().focus(String expression)

表达式相对于视图根的位置,或者:

PrimeFaces.current().focus(String expression, UIComponent base)

表达式相对于所提供的基础组件。

在PrimeFaces 6.3之前

只需查看PrimeFaces在focus渲染器中的操作:

ResponseWriter writer = context.getResponseWriter();
UIComponent forComponent = SearchExpressionFacade.resolveComponent(
        context, focus, focus.getFor());

String clientId = forComponent.getClientId(context);

writer.write("$(function(){");
writer.write("PrimeFaces.focus('" + clientId + "');");
writer.write("});");

您可以在动作中简单地执行相同的操作:

public void focus(String expression) {
  FacesContext context = FacesContext.getCurrentInstance();
  UIComponent forComponent = SearchExpressionFacade.resolveComponent(
    context,
    UIComponent.getCurrentComponent(context),
    expression
  );
  String clientId = forComponent.getClientId();
  RequestContext.getCurrentInstance().execute("PrimeFaces.focus('" + clientId + "');");
}

请注意,我正在使用触发操作的命令按钮作为搜索表达式的源,并且您不需要在此处使用$(function(){...})
唯一需要做的是,不要将clientId作为操作方法的参数,而是创建代码以确定哪个组件应该获得焦点。
使用XHTML进行测试:
<h:form id="main">
  <p:inputText id="text1"/>
  <p:inputText id="text2"/>
  <p:commandButton value="Focus 1" action="#{myBean.focus('text1')}"/>
  <p:commandButton value="Focus 2" action="#{myBean.focus('text2')}"/>
  <p:commandButton value="Form" action="#{myBean.focus('@form')}"/>
</h:form>

3
我认为将其添加到RequestContext(现在是PrimeFaces.current())是一个好主意。我会在6.3中处理它:https://github.com/primefaces/primefaces/issues/3412 - tandraschko

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接