jQuery 按下文本框的 Enter 键时触发事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13158752/
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
Fire event on enter key press for a textbox
提问by ALAN
I have the following asp.net textbox control.
我有以下 asp.net 文本框控件。
<asp:TextBox ID="txtAdd" runat="server" />
After the user writes something in this textbox and presses the ENTERkey, I want to run some code from codebehind.
在用户在此文本框中写入内容并按下ENTER键后，我想从代码隐藏中运行一些代码。
What should I do?
我该怎么办？
Using jQuery I captured ENTERkey and fired some hidden button event
使用 jQuery 我捕获了ENTER键并触发了一些隐藏的按钮事件
$(document).ready(function(){
$(window).keydown(function(e){
if(e.keyCode == 13) $('#<% addbtn.ClientID %>'.click();
});
});
Is there any better way ?
有没有更好的办法？
采纳答案by ahaliav fox
ASPX:
ASPX：
<asp:TextBox ID="TextBox1" clientidmode="Static" runat="server" onkeypress="return EnterEvent(event)"></asp:TextBox>
<asp:Button ID="Button1" runat="server" style="display:none" Text="Button" />
JS:
JS：
function EnterEvent(e) {
if (e.keyCode == 13) {
__doPostBack('<%=Button1.UniqueID%>', "");
}
}
CS:
CS：
protected void Button1_Click1(object sender, EventArgs e)
{
}
回答by Jimmy Mattsson
Wrap the textbox inside
asp:PaneltagsHide a Button that has a click event that does what you want done and give the
<asp:panel>aDefaultButtonAttribute with the ID of the Hidden Button.
将文本框包裹在
asp:Panel标签内隐藏有一个click事件，你想要做的事情一个按钮，然后提供
<asp:panel>一个DefaultButton带有隐藏按钮的ID属性。
<asp:Panel runat="server" DefaultButton="Button1">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" style="display:none" OnClick="Button1_Click" />
</asp:Panel>
回答by wblanks
You could wrap the textbox and button in an ASP:Panel, and set the DefaultButton property of the Panel to the Id of your Submit button.
您可以将文本框和按钮包装在 ASP:Panel 中，并将面板的 DefaultButton 属性设置为提交按钮的 Id。
<asp:Panel ID="Panel1" runat="server" DefaultButton="SubmitButton">
<asp:TextBox ID="TextBox1" runat="server" />
<asp:Button ID="SubmitButton" runat="server" Text="Submit" OnClick="SubmitButton_Click" />
</asp:Panel>
Now anytime the focus is within the Panel, the 'SubmitButton_Click' event will fire when enter is pressed.
现在，只要焦点位于面板内，按下 Enter 时就会触发“SubmitButton_Click”事件。
回答by Matthew Radford
ahaliav fox 's answer is correct, however there's a small coding problem.
Change
ahaliav fox 的回答是正确的，但是有一个小的编码问题。
改变
<%=Button1.UniqueId%>
to
到
<%=Button1.UniqueID%>
it is case sensitive. Control.UniqueID Property
它区分大小写。Control.UniqueID 属性
Error 14 'System.Web.UI.WebControls.Button' does not contain a definition for 'UniqueId' and no extension method 'UniqueId' accepting a first argument of type 'System.Web.UI.WebControls.Button' could be found (are you missing a using directive or an assembly reference?)
错误 14“System.Web.UI.WebControls.Button”不包含“UniqueId”的定义，并且找不到接受“System.Web.UI.WebControls.Button”类型的第一个参数的扩展方法“UniqueId”（您是否缺少 using 指令或程序集引用？）
N.b. I tried the TextChangedevent myself on AutoPostBackbefore searching for the answer, and although it is almost right it doesn't give the desired result I wanted nor for the question asked. It fires on losing focus on the Textboxand not when pressing the return key.
Nb在寻找答案之前，TextChanged我自己尝试了这个事件AutoPostBack，虽然它几乎是正确的，但它没有给出我想要的结果，也没有给出所提出的问题。它在失去焦点时触发，Textbox而不是在按下返回键时触发。
回答by Sedat Kumcu
my jQuery powered solution is below :)
我的 jQuery 驱动的解决方案如下:)
Text Element:
文本元素：
<asp:TextBox ID="txtTextBox" ClientIDMode="Static" onkeypress="return EnterEvent(event);" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmitButton" ClientIDMode="Static" OnClick="btnSubmitButton_Click" runat="server" Text="Submit Form" />
Javascript behind:
背后的Javascript：
<script type="text/javascript" language="javascript">
function fnCheckValue() {
var myVal = $("#txtTextBox").val();
if (myVal == "") {
alert("Blank message");
return false;
}
else {
return true;
}
}
function EnterEvent(e) {
if (e.keyCode == 13) {
if (fnCheckValue()) {
$("#btnSubmitButton").trigger("click");
} else {
return false;
}
}
}
$("#btnSubmitButton").click(function () {
return fnCheckValue();
});
</script>
回答by Asanka Namal
<asp:Panel ID="Panel2" runat="server" DefaultButton="bttxt">
<telerik:RadNumericTextBox ID="txt" runat="server">
</telerik:RadNumericTextBox>
<asp:LinkButton ID="bttxt" runat="server" Style="display: none;" OnClick="bttxt_Click" />
</asp:Panel>
protected void txt_TextChanged(object sender, EventArgs e)
{
//enter code here
}
回答by Vadym Klyachyn
Try follow: Aspx:
尝试遵循： Aspx：
<asp:TextBox ID="TextBox1" clientidmode="Static" runat="server" onkeypress="EnterEvent(event, someMethod)"></asp:TextBox>
<asp:Button ID="Button1" onclick="someMethod()" runat="server" Text="Button" />
JS:
JS：
function EnterEvent(e, callback) {
if (e.keyCode == 13) {
callback();
}
}
回答by Tran Anh Hien
<input type="text" id="txtCode" name="name" class="text_cs">
and js:
和js：
<script type="text/javascript">
$('.text_cs').on('change', function () {
var pid = $(this).val();
console.log("Value text: " + pid);
});
</script>
回答by Anwar Sadat
Try this option.
试试这个选项。
update that coding part in Page_Load event before catching IsPostback
在捕获 IsPostback 之前更新 Page_Load 事件中的编码部分
TextBox1.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('ctl00_ContentPlaceHolder1_Button1').click();return false;}} else {return true}; ");
回答by roblem
My 2c.. I have used javascript, but found it did things that were not quite expected.
我的 2c.. 我使用过 javascript，但发现它做了一些出乎意料的事情。
USE the panel's defaultButton attribute/property as many of the above posts suggest. It is reliable (EASY) and works in all the browsers I have tested it on.
按照上述许多帖子的建议使用面板的 defaultButton 属性/属性。它可靠（简单）并且适用于我测试过的所有浏览器。
