CODEWITHSUNDEEP
jqueryasp.netevent-handling
ALAN
ALAN

Reputation: 495

Fire event on enter key press for a textbox

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 ?

Upvotes: 34

Views: 148212

Answers (11)

Soumey Roon
Soumey Roon

Reputation: 1

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

Upvotes: 0

Tran Anh Hien
Tran Anh Hien

Reputation: 747

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

Upvotes: 0

Vadym Klyachyn
Vadym Klyachyn

Reputation: 106

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

Upvotes: 1

ahaliav fox
ahaliav fox

Reputation: 2247

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

    }

Upvotes: 33

roblem
roblem

Reputation: 591

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.

Upvotes: -1

wblanks
wblanks

Reputation: 598

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.

Upvotes: 11

Matthew R
Matthew R

Reputation: 1068

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.

Upvotes: 5

Jimmy Mattsson
Jimmy Mattsson

Reputation: 2113

  1. Wrap the textbox inside asp:Panel tags

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

Upvotes: 113

Asanka Namal
Asanka Namal

Reputation: 19

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

Upvotes: 1

Sedat Kumcu
Sedat Kumcu

Reputation: 2430

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>

Upvotes: 2

Anwar Sadat
Anwar Sadat

Reputation: 1

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

Upvotes: 0

Related Questions