在文本框中按下回车键时触发事件

Question

我有以下的asp.net文本框控件。

<asp:TextBox ID="txtAdd" runat="server" />

在用户在此文本框中输入内容并按下ENTER键后，我希望能够从后端运行一些代码。 我该怎么做？ 使用jQuery来捕获ENTER键并触发某个隐藏按钮的事件。

$(document).ready(function(){ 
   $(window).keydown(function(e){
      if(e.keyCode == 13) $('#<% addbtn.ClientID %>'.click();
   }); 
});

有更好的方法吗？

- ALAN

Answer 1

1. 将文本框包装在asp:Panel标签中。

2. 隐藏一个具有执行所需操作的点击事件的按钮，并将<asp:panel>赋予一个DefaultButton属性，其ID为隐藏按钮的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>

- Jimmy Mattsson

---

@Rahul，它不应该捕获某些键，只有在按下回车键时才会触发。 - Jimmy Mattsson

这应该是正确的答案。更好的解决方案！ - Mad Dog Tannen

虽然从ASP的角度来看，这是技术上“正确”的答案，但不一定是最好的答案。使用此解决方案将更改大多数（全部？）浏览器的默认行为，当选择元素或文件输入元素具有焦点并按下回车键时。通常应该打开或选择选择选项和文件浏览器。相反，表单被提交。此外，由于面板div，页面会添加额外的潜在不必要的HTML。我更喜欢使用JavaScript和类名的更清洁的自定义解决方案。 - Jargs

原始问题包括ASP.NET，因此，使用Panel的答案确实是最佳答案。当然，在没有ASP.NET或更复杂的形式下，还有其他实现方法。在评论部分添加不严格适用的疑问会给那些仍在学习的人带来困难。 - Pete

Answer 2

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：

function EnterEvent(e) {
        if (e.keyCode == 13) {
            __doPostBack('<%=Button1.UniqueID%>', "");
        }
    }

计算机科学：

protected void Button1_Click1(object sender, EventArgs e)
    {

    }

- ahaliav fox

---

另一个选项是给asp:TextBox一个唯一的类，在javascript中执行$(".MyUniqueButtonClass")[0].click()。这样做会更简单，并且不像__doPostBack那样依赖于asp.net实现细节。 - Curtis Yallop

应该是UniqueID而不是UniqueId吧？编辑时受到6个字符限制，有点卡住了:( - Sue Maurizio

Sue Maurizio - 当前应该是UniqueID，我会修复它，谢谢。 - ahaliav fox

数字键盘上的回车键怎么办？ - Gaurav Aggarwal

Answer 3

您可以将文本框和按钮放在一个ASP:Panel中，并将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>

现在，只要焦点在面板内，按下回车键就会触发“SubmitButton_Click”事件。

- wblanks

---

按钮的ID应该是'btnSubmit'，对吧？ - Muhammedh

Answer 4

ahaliav fox的答案是正确的，但存在一些编码问题。
更改为

<%=Button1.UniqueId%> 

to

<%=Button1.UniqueID%> 

区分大小写。 Control.UniqueID 属性

错误 14“System.Web.UI.WebControls.Button”不包含“UniqueId”的定义，也找不到接受类型为“System.Web.UI.WebControls.Button”的第一个参数的扩展方法“UniqueId”(是否缺少 using 指令或程序集引用?)

注意：在寻找答案之前，我尝试了AutoPostBack上的TextChanged事件，虽然它几乎是正确的，但它没有给我想要的期望结果，也不能回答我的问题。它在失去焦点时触发Textbox，而不是按下返回键。

- Matthew R

Answer 5

我的基于jQuery的解决方案如下:)

文本元素:

<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的实现原理：

<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>

- Sedat Kumcu

Answer 6

尝试如下： 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：

function EnterEvent(e, callback) {
        if (e.keyCode == 13) {
            callback();
        }
    }

- Vadym Klyachyn

---

这几乎是已经被接受的答案的完全复制，它如何为问题增加任何价值？ - Marco Scabbiolo

感谢Marco的评论。在我的情况下，这是解决方案。当我有不同的控件并且需要给它们相同的行为时，我可以只使用一个通用方法而不是到处硬编码。我只是分享了我在项目中使用的经验。 - Vadym Klyachyn

Answer 7

<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
}

- Asanka Namal

Answer 8

<script type="text/javascript">
    function uniKeyCode(event) {
        var key = event.keyCode;
        if(key == 13){
            __doPostBack('ctl00$MainContent$btnFind', '');
        }
    }
</script>
<asp:TextBox ID="txt_MBCID" CssClass="form-control" placeholder="" runat="server" data-toggle="tooltip" title="ស្វែងរក-តាមរយះលេខMBWin CID" onkeydown="uniKeyCode(event)" data-placement="left"></asp:TextBox>
<asp:LinkButton ID="btnFind" AccessKey="1" runat="server" data-placement="right" title="Search_by_AccountID" data-toggle="tooltip" CssClass="input-group-addon" Text="Find" OnClick="btnFind_Click" ><span class="glyphicon glyphicon-search"></span></asp:LinkButton>
                                                   

- Soumey Roon

---

希望这对你有所帮助。 - Soumey Roon

Answer 9

尝试这个选项。

在捕获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}; ");

- Anwar Sadat

Answer 10

<input type="text" id="txtCode" name="name" class="text_cs">

和 js：

<script type="text/javascript">
$('.text_cs').on('change', function () {
var pid = $(this).val();
console.log("Value text: " + pid);
});
</script>

- Tran Anh Hien