Fire event on enter key press for a textbox

Question

I have the following asp.net textbox control.

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

After the user writes something in this textbox and presses the ENTER key, I want to run some code from codebehind.

What should I do?

Using jQuery I captured ENTER key and fired some hidden button event

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

Is there any better way ?

score 113 · Answer 1 · edited Mar 04 '14 at 20:19

113

Wrap the textbox inside asp:Panel tags
Hide a Button that has a click event that does what you want done and give the <asp:panel> a DefaultButton Attribute with the ID of the Hidden Button.

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

edited Mar 04 '14 at 20:19

Malachi

3,205
4
29
46

answered Apr 25 '13 at 11:08

Jimmy Mattsson

2,085
5
19
34

1

@Rahul It's not supposed to catch some keys, only when enter key is pressed – Jimmy Mattsson Dec 02 '14 at 13:07
1

This should be the correct answer. Much better solution! – Mad Dog Tannen Feb 03 '15 at 15:43
While this is technically the "correct" answer from an ASP perspective, it's not necessarily the best answer. 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. Normally he select options should be opened or selected and the file browser opened. Instead, the form is submitted. Plus, there's extra potentially unnecessary HTML that is added to the page because of the panel div. I much prefer a cleaner, custom solution that uses JavaScript and class names. – Jargs Dec 28 '16 at 23:24
The original question included ASP.NET, so yes, the answer with a Panel actually is the best answer. Certainly for some other situation without ASP.NET, or in a more complicated form, there are other implementations. Adding doubts which don't strictly apply in the comments section makes it harder on people who are still learning. – Pete Sep 19 '18 at 18:38

ahaliav fox · Accepted Answer · 2015-04-28T15:10:20.627

33

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

    }

edited Apr 28 '15 at 15:10

answered Oct 31 '12 at 13:31

ahaliav fox

2,217
22
21

Another option is to give the asp:TextBox a unique class and in the javascript do $(".MyUniqueButtonClass")[0].click(). This is a bit simpler and relies less on asp.net implementation details than __doPostBack. – Curtis Yallop Jan 22 '15 at 16:52
Shouldn't it be `UniqueID` instead of `UniqueId`? Stuck with the 6-characters limit for edits :( – Sue Maurizio Apr 28 '15 at 10:01
Sue Maurizio - Currect, sould be UniqueID i will fix it, thanks – ahaliav fox Apr 28 '15 at 15:09
what about the enter on numpad – Gaurav Aggarwal Jun 23 '16 at 12:04

wblanks · Answer 3 · 2014-04-28T16:29:58.303

11

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

edited Apr 28 '14 at 16:29

answered Aug 03 '13 at 11:29

wblanks

598
10
27

The button ID should be 'btnSubmit' yeah? – Muhammedh Apr 28 '14 at 08:32

score 5 · Answer 4 · edited Mar 04 '14 at 20:20

ahaliav fox 's answer is correct, however there's a small coding problem.
Change

<%=Button1.UniqueId%>

to

<%=Button1.UniqueID%>

it is case sensitive. Control.UniqueID Property

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

N.b. I tried the TextChanged event myself on AutoPostBack before 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 Textbox and not when pressing the return key.

score 2 · Answer 5 · answered Aug 19 '13 at 07:51

my jQuery powered solution is below :)

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:

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

score 1 · Answer 6 · edited Nov 08 '13 at 09:19

1

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

edited Nov 08 '13 at 09:19

laalto

150,114
66
286
303

answered Nov 08 '13 at 09:01

Asanka Namal

19
1

score 1 · Answer 7 · answered Jun 23 '16 at 18:43

1

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

answered Jun 23 '16 at 18:43

Vadym Klyachyn

96
3

This is almost an exact copy of an already accepted answer, how would it add any value to the question? – Marco Scabbiolo Jun 23 '16 at 19:28
Thank you Marco for your comment. In my case it was solution. When I had different controls and I needed to give them same behaviour. And I could use only one universal method instead of hard-code everywhere. I only shared my experience that I used in my project. – Vadym Klyachyn Oct 05 '16 at 20:23

Anwar Sadat · Answer 8 · 2013-05-29T07:14:35.277

0

Try this option.

update that coding part in Page_Load event before catching IsPostback

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

edited May 29 '13 at 07:14

answered May 29 '13 at 07:04

Anwar Sadat

1
1

score 0 · Answer 9 · answered Jan 03 '17 at 02:39

0

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

and js:

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

answered Jan 03 '17 at 02:39

Tran Anh Hien

687
8
11

score 0 · Answer 10 · answered Sep 14 '21 at 09:28

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

score -1 · Answer 11 · answered Oct 03 '14 at 13:49

-1

My 2c.. I have used javascript, but found it did things that were not quite expected.

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.

answered Oct 03 '14 at 13:49

roblem

527
5
8

Fire event on enter key press for a textbox

11 Answers11

Linked