如何在p:inputText中按下enter时调用方法

问题描述 投票:0回答:3

我有一个JSF ajax keydown事件链接到支持bean中的事件侦听器。

JSF文件中的代码如下。

<p:inputText value="#{someBean.value}>
<p:ajax event="keydown" listener="#{someBean.keyDownEvent}" />
</p:inputText>

我想获得“Enter”按钮事件代码。当我点击回车时,我需要在服务器端执行一些特定的事件。如何使用ajax调用获取该事件代码?

jsf primefaces
3个回答
5
投票

由于您只想在按下Enter键时执行操作,我真的不会使用Ajax调用将每个键发送到后端,并确定按下了哪个键。

只需检查前端的输入,如果检测到它,则使用p:remoteCommand调用后端。但这里有一个问题。输入woud默认提交整个表单,因此当找到enter(13)的false时,请确保返回keyCode

然后,validation。如果您的表单中碰巧有多个输入,则可能会遇到验证错误。因此,将远程命令设置为仅处理自身以及按下回车键的输入。 (可选)您可能希望更新链接到输入的p:message字段以显示任何验证错误。

这将导致:

<p:remoteCommand name="myRemCo"
                 action="#{someBean.action}"
                 process="@this myInput"
                 update="myInputMessage"/>

<p:inputText id="myInput"
             value="#{someBean.value}"
             onkeydown="if (event.keyCode === 13) { myRemCo(); return false; }"
             required="true"/>
<p:message for="myInput" id="myInputMessage"/>

请注意,我将required="true"放在那里以演示更新消息,以防在输入仍为空时按Enter键。

也可以看看:


0
投票

如果您需要按下的键的代码,那么这是一个例子。它为inText输入控件分配一个事件处理程序。这里从事件对象获取按下的键的代码,并通过onKeyPressed调用控制器的<p:remoteCommand>方法。密钥代码作为请求参数传递。 outText输出控件中显示的关键代码作为测试。

小脸:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
  <h:head>
    <title>Facelet Title</title>
      <script type="text/javascript">
        function jsKeyPressedHandler(event)
        {
          var kc = event.which || event.keyCode;
          rc( [{ name : 'keyCode', value : Number( kc ) }] );
        }
      </script>

</h:head>
  <h:body>
    <h:form id="myForm">
    <p:remoteCommand name="rc" update="outText" actionListener="#{myBean.onKeyPressed}" />
    <p:inputText id="inText" value="#{myBean.text1}" onkeypress="jsKeyPressedHandler( event )"/>
    <h:outputText id="outText" value="#{myBean.text2}"/>
    </h:form>
  </h:body>

  </h:body>
</html>

控制器:

package x;

import java.io.Serializable;
import java.util.Map;
import javax.faces.context.FacesContext;
import javax.faces.view.ViewScoped;
import javax.inject.Named;

@Named( value = "myBean" )
@ViewScoped
public class MyBean implements Serializable
{
  private String text1;
  private String text2;

  public String getText1() { return text1; }      
  public void setText1( String text1_ ) { text1 = text1_; }      
  public String getText2() { return text2; }      
  public void setText2( String text2_ ) { text2 = text2_; }      

  public void onKeyPressed()
  {
    Map<String,String> reqParams = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
    String c = (String) reqParams.get( "keyCode" );
    if ( text2 != null )
      text2 += c;
    else
      text2 = c;  
  }
}

0
投票

您可以使用primefaces的默认命令组件。看看这个

© www.soinside.com 2019 - 2024. All rights reserved.