jQuery 当我按下回车/回车键时，h:inputText 可以调用托管 bean 中的方法吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3937925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can h:inputText invoke a method inside managed bean when I press the return/enter key
提问by Thang Pham
So I have an inputTextthat has its value hook to myBean.text, I want that if I click enter/return key, the inputText will invoke a method inside myBeanto do something. Can any one help me?
所以我有一个inputText它的值钩子myBean.text，我希望如果我点击输入/返回键，inputText 将调用内部的一个方法myBean来做一些事情。谁能帮我？
回答by BalusC
As per your question history, I know that you're using JSF 2.0, so here's a JSF 2.0 targeted answer: use <f:ajax>which listens on a changeevent and use keypressevent to invoke it when the enter key is pressed (keycode 13).
根据您的问题历史，我知道您使用的是 JSF 2.0，所以这里有一个 JSF 2.0 目标答案：use <f:ajax>which 侦听change事件并使用keypressevent 在按下 Enter 键时调用它（键码 13）。
<h:inputText value="#{bean.text1}"
onkeypress="if (event.keyCode == 13) { onchange(); return false; }">
<f:ajax event="change" listener="#{bean.listener}" />
</h:inputText>
The #{bean.listener}should point to a method like
本#{bean.listener}应指向等的方法
public void listener(AjaxBehaviorEvent event) {
// ...
}
回答by Damo
The easiest way is to put the inputTextin a form and hide a commandButtonnext to it.
最简单的方法是将 放在inputText一个表单中并commandButton在它旁边隐藏一个。
For example:
例如：
<h:form>
<h:inputText styleClass="myText" value="#{myBean.text}"/>
<h:commandButton styleClass="myButton" action="#{myBean.myMethod}" style="display:none;" value="submit"/>
</h:form>
UPDATE:
更新：
If you are using Seam you can use the <s:defaultAction/>tag. This makes that commandButtonthat contains it the one that responds to the ENTER.
如果您使用 Seam，您可以使用<s:defaultAction/>标签。这使得commandButton包含它的那个响应 ENTER。
<h:commandButton class="myButton" action="#{myBean.myMethod}" style="display:none;" value="submit">
<s:defaultAction/>
</h:commandButton>
If you aren't using Seam you could try one of the similar defaultAction controls
如果您不使用 Seam，您可以尝试使用一种类似的 defaultAction 控件
Or you could roll your own with a bit of Javascript; ideally jQuery. For example:
或者你可以用一些 Javascript 来推出你自己的；理想情况下是jQuery。例如：
$('input.myText').keypress(function(e) {
if (e.which == 13) {
$('.myButton').click();
}
});
回答by Jens B
Actually you can use the following syntax:
实际上，您可以使用以下语法：
<h:inputText value="#{bean.text1}"
onkeypress="return (event.keyCode == 13)">
<f:ajax event="keypress" listener="#{bean.listener}" />
</h:inputText>
JSF creates an event chain and whatever you state under "onkeypress" will be evaluated BEFORE your f:ajax event. Thus you can return false to break the event chain. If you use the change event on f:ajax it'll of course fire on other change events which you probably don't want.
JSF 创建一个事件链，并且您在“onkeypress”下声明的任何内容都将在您的 f:ajax 事件之前进行评估。因此，您可以返回 false 以中断事件链。如果您在 f:ajax 上使用更改事件，它当然会触发您可能不想要的其他更改事件。
回答by lkdg
you can probably do something like this:
你可能可以做这样的事情：
<h:inputText value="123" onkeyup="if(event.keyCode==13)this.blur();" onchange="document.getElementById('fakebutton').click();" valueChangeListener="#{yourbean.dosomething}"/>
<h:commandButton id="fakebutton"actionListener="#{yourbean.fakeaction}"/>
inside your bean:
在你的豆子里：
public void dosomething(ValueChangeEvent event)
{
System.out.println("I did something");
}
public void fakeaction(ActionEvent event)
{
System.out.println("I do no nothing");
}
回答by par
I decided to make this an answer so the code would be clearer than inlined as a comment, but Damo's solution is exactly what worked for me (so upvote his answer not this one ;-). I had a form with a text entry field and a search icon (a magnifying glass). I wanted the ajax query to be submitted by both a click on the magnifying class and pressing enter in the input text field. Clicking the icon in my original solution worked, but for the life of me I couldn't get pressing enter in the text field to submit the ajax call as well (it submitted the form via the normal mechanism instead). Here's the code that finally worked. Thanks again Damo.
我决定把它作为一个答案，这样代码会比作为注释内联的更清晰，但 Damo 的解决方案正是对我有用的（所以赞成他的答案而不是这个 ;-）。我有一个带有文本输入字段和搜索图标（放大镜）的表单。我希望通过单击放大类并在输入文本字段中按 Enter 来提交 ajax 查询。单击原始解决方案中的图标有效，但在我的一生中，我无法在文本字段中按 Enter 键来提交 ajax 调用（而是通过正常机制提交表单）。这是最终有效的代码。再次感谢达摩。
<div class="boxWrapper searchWrapper right">
<div class="boxHeader"><div class="tail" /></div>
<div class="boxContent">
<h:form prependId="false">
<label>SEARCH:</label>
<div class="searchBox">
<f:ajax execute="@form" render="@none">
<h:inputText id="keywords" value="#{search.searchString}" onblur="inputTextBlur( this, '#{search.searchString}' );" onfocus="inputTextFocus( this, '#{search.searchString}' );" />
<h:commandButton action="#{search.search}" style="display:none;" value="submit" />
<h:commandLink id="cmdLink" action="#{search.search}">
<!-- the span here is to apply .searchWrapper span { } specific css to the image position -->
<span><h:graphicImage styleClass="iconSearch" url="images/iconMask.png" width="17" height="17" /></span>
</h:commandLink>
</f:ajax>
</div>
</h:form>
</div>
<div class="boxFooter"><div class="tail" />
</div>
p.s. - @BalusC: This is the rare case where your answer wasn't a 100% fit with what I was looking for but I've lost count of how many of your others have been. So thank you to you as well, and enjoy the book I sent you from your wishlist. If you'd ever like to do some consulting please check my profile and send me an email.
ps - @BalusC：这是一种罕见的情况，你的答案不是 100% 符合我正在寻找的，但我已经不知道你的其他人有多少了。所以也谢谢你，享受我从你的心愿单中寄给你的书。如果您想做一些咨询，请查看我的个人资料并向我发送电子邮件。
Regards,
问候，
par
标准杆
回答by daff
I had the same problem and since I don't have enough reputation jet, I post this as an answer.
我遇到了同样的问题，因为我没有足够的声望喷气机，所以我将此作为答案发布。
In my case there are multiple inputs which need to be submitted with f:ajaxseparately. I needed to improve the solution of BalusC a bit.
就我而言，有多个输入需要单独提交f:ajax。我需要稍微改进一下 BalusC 的解决方案。
You need to add this.in front of onchange().
您需要this.在onchange().
<h:inputText value="#{bean.text1}"
onkeypress="if (event.keyCode == 13) { this.onchange(); return false; }">
<f:ajax event="change" listener="#{bean.listener}" />
</h:inputText>
