rich:hotKey for Form Submission?
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:output开发者_JAVA技巧Label 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?
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"/>
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>
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.
加载中,请稍侯......
精彩评论