文本框的输入按键触发事件答案

【问题标题】：Fire event on enter key press for a textbox文本框的输入按键触发事件
【发布时间】：2012-10-31 13:10:03
【问题描述】：

我有以下 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();
   }); 
});

有没有更好的办法？

【问题讨论】：

标签： jquery asp.net event-handling

【解决方案1】：

将文本框包裹在asp:Panel标签内
隐藏具有单击事件的按钮，该事件执行您想要完成的操作，并为 <asp:panel> 提供带有隐藏按钮 ID 的 DefaultButton 属性。

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

【讨论】：

@Rahul 它不应该捕捉一些键，只有当按下回车键时
这应该是正确的答案。更好的解决方案！
虽然从 ASP 的角度来看，这在技术上是“正确”的答案，但它不一定是最好的答案。 Using this solution will change most (all?) browsers default behavior when a select element or file input element has focus and the enter key is pressed.通常应该打开或选择他的选择选项并打开文件浏览器。而是提交表单。另外，由于面板 div，页面中添加了额外的潜在不必要的 HTML。我更喜欢使用 JavaScript 和类名的更简洁的自定义解决方案。
最初的问题包括 ASP.NET，所以是的，使用 Panel 的答案实际上是最好的答案。当然对于其他一些没有 ASP.NET 的情况，或者更复杂的形式，还有其他的实现。添加不严格适用于 cmets 部分的疑问会使仍在学习的人更难。

【解决方案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%>', "");
        }
    }

CS：

protected void Button1_Click1(object sender, EventArgs e)
    {

    }

【讨论】：

另一种选择是给 asp:TextBox 一个唯一的类，并在 javascript 中执行 $(".MyUniqueButtonClass")[0].click()。这比 __doPostBack 更简单一些，并且对 asp.net 实现细节的依赖更少。
不应该是UniqueID而不是UniqueId吗？坚持编辑的 6 个字符限制:(
Sue Maurizio - 正确的，应该是 UniqueID 我会修复它，谢谢
小键盘回车怎么样

【解决方案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”事件。

【讨论】：

按钮 ID 应该是 'btnSubmit' 是吗？

【解决方案4】：

ahaliav fox 的回答是正确的，但是有一个小编码问题。
改变

<%=Button1.UniqueId%>

到

<%=Button1.UniqueID%>

区分大小写。 Control.UniqueID Property

错误 14“System.Web.UI.WebControls.Button”不包含“UniqueId”的定义，并且没有接受“System.Web.UI.WebControls.Button”类型的第一个参数的扩展方法“UniqueId”可以被发现（您是否缺少 using 指令或程序集引用？）

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

尝试关注： ASP：

<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();
        }
    }

【讨论】：

这几乎是一个已经接受的答案的精确副本，它将如何为问题增加任何价值？
感谢 Marco 的评论。就我而言，这是解决方案。当我有不同的控制并且我需要给他们相同的行为时。而且我只能使用一种通用方法，而不是到处使用硬编码。我只分享了我在项目中使用的经验。

【解决方案8】：

试试这个选项。

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

【讨论】：

请帮忙。

【解决方案11】：

我的 2c.. 我用过 javascript，但发现它做了一些意想不到的事情。

按照上述许多帖子的建议，使用面板的 defaultButton 属性/属性。它是可靠的 (EASY) 并且适用于我测试过的所有浏览器。

【讨论】：