rich：表单提交的热键？

发布于 2024-10-10 16:27:20 字数 689 浏览 0 评论 0原文

我有一个看起来像这样的登录表单，使用 RichFaces 和 Seam：

<h:form id="loginForm">
   <h:outputLabel value="Username" />
   <h:inputText value="#{identity.credentials.username}" />
   <h:outputLabel value="Password" />
   <h:inputText value="#{identity.credentials.password}" />

   <h:commandLink action="#{identity.login()}" value="Login" />
</h:form>

我希望能够允许用户点击“回车”并自动提交表单进行登录。我尝试过使用 Richfaces 的功能，但我认为我做错了什么。我输入的代码如下所示：

<rich:hotKey key="return"
   handler="#{rich:element('loginForm')}.submit()" />

但是，当我在表单内按 Enter 键时，什么也没有发生。知道我在这里做错了什么吗？

原文

I've got a login form that looks something like this, using RichFaces and Seam:

<h:form id="loginForm">
   <h:outputLabel value="Username" />
   <h:inputText value="#{identity.credentials.username}" />
   <h:outputLabel value="Password" />
   <h:inputText value="#{identity.credentials.password}" />

   <h:commandLink action="#{identity.login()}" value="Login" />
</h:form>

I'd like to be able to allow the user to hit 'enter' and automatically submit the form to login. I've tried using Richfaces' <rich:hotKey /> feature, but I think I'm doing something wrong. The code I've put in looks like this:

<rich:hotKey key="return"
   handler="#{rich:element('loginForm')}.submit()" />

However, when I hit enter inside the form, nothing happens. Any idea what I'm doing wrong here?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谁的年少不轻狂 2024-10-17 16:27:20

我认为你需要使用选择器属性。比如，

<rich:hotKey key="return"
             handler="#{rich:element('loginForm')}.submit()" 
             selector="#loginForm"/>

另外，您应该单击提交按钮，而不是提交表单。像这样的东西，

<rich:hotKey key="return"
             handler="#{rich:element('loginButton')}.click()" 
             selector="#loginForm"/>

I think you need to use selector property. Something like,

<rich:hotKey key="return"
             handler="#{rich:element('loginForm')}.submit()" 
             selector="#loginForm"/>

Also, instead of submitting the form, you should click submit button. Something like,

<rich:hotKey key="return"
             handler="#{rich:element('loginButton')}.click()" 
             selector="#loginForm"/>

回复收藏 0 原文

才能让你更想念 2024-10-17 16:27:20

尝试以下代码。我希望你能得到一些想法..

 <body>
        <h:form id="loginForm">

            <h:outputLabel value="Username : " />
            <h:inputText id="userNameId" value="#{Login.username}" />
            <h:outputLabel value="Password : " />
            <h:inputText id="passwordId" value="#{Login.password}" />

            <a4j:commandButton id="loginButton" action="#{Login.loginButton}" value="Login" focus="button"/>

            <rich:hotKey key="return"
                         selector="#userNameId"
                         handler="#{rich:element('loginForm:loginButton')}.click();
                         event.stopPropagation();event.preventDefault();
                         return false;"/>

            <rich:hotKey key="return"
                         selector="#passwordId"
                         handler="#{rich:element('loginForm:loginButton')}.click();
                         event.stopPropagation();event.preventDefault();
                         return false;"/>
        </h:form>
    </body>

Try the following code. I hope you can get some idea..

 <body>
        <h:form id="loginForm">

            <h:outputLabel value="Username : " />
            <h:inputText id="userNameId" value="#{Login.username}" />
            <h:outputLabel value="Password : " />
            <h:inputText id="passwordId" value="#{Login.password}" />

            <a4j:commandButton id="loginButton" action="#{Login.loginButton}" value="Login" focus="button"/>

            <rich:hotKey key="return"
                         selector="#userNameId"
                         handler="#{rich:element('loginForm:loginButton')}.click();
                         event.stopPropagation();event.preventDefault();
                         return false;"/>

            <rich:hotKey key="return"
                         selector="#passwordId"
                         handler="#{rich:element('loginForm:loginButton')}.click();
                         event.stopPropagation();event.preventDefault();
                         return false;"/>
        </h:form>
    </body>

回复收藏 0 原文

世界等同你 2024-10-17 16:27:20

对于所有仍在为这个问题苦苦挣扎的人，我终于得到了一些有用的东西。我的代码现在如下所示：

<h:form id="loginForm">
   <h:outputLabel value="Username" />
   <h:inputText value="#{identity.credentials.username}" />
   <h:outputLabel value="Password" />
   <h:inputText value="#{identity.credentials.password}" />

   <h:commandLink action="#{identity.login()}" value="Login" />
   <rich:hotKey key="return"
             handler="#{rich:element('loginForm')}.submit()" 
             selector="#loginForm"/>

</h:form>

您还可以使用更具体的选择器，以便仅当焦点位于表单字段之一时按 Enter 键才会提交表单。不管怎样，这终于解决了我的问题。

For all those still struggling with this issue, I've finally gotten something that works. My code now looks like this:

<h:form id="loginForm">
   <h:outputLabel value="Username" />
   <h:inputText value="#{identity.credentials.username}" />
   <h:outputLabel value="Password" />
   <h:inputText value="#{identity.credentials.password}" />

   <h:commandLink action="#{identity.login()}" value="Login" />
   <rich:hotKey key="return"
             handler="#{rich:element('loginForm')}.submit()" 
             selector="#loginForm"/>

</h:form>

You can also use a more specific selector so that an enter press only submits the form when the focus is on one of the form fields. Either way, this FINALLY solved my problem.

回复收藏 0 原文

~没有更多了~