javascript - onKeypress Enter Key event on textfield not working in Chrome - Stack Overflow

admin管理员组

文章数量:1328337

I have a question along the same vein as the one asked here regarding how the enter key is handled in chrome.

The effect I am trying to acplish is to allow the enter key to call a click event of one a button while focus in within the current field. To acplish this I am using the following code:

javascript:

 <script type="text/javascript">
//attempting to capture keypress for chrome here but this is not working
        $("#txtContainer").keypress(function (e) {
            if (e.keyCode == '13') {
                e.preventDefault();
                doClick(buttonname, e);
                return false;
            }
        });

        function doClick(buttonName, e) {

            var key;
            if (window.event)
                key = window.event.keyCode;     //IE
            else
                key = e.which;     //firefox

            if (key == 13) {
                var btn = document.getElementById(buttonName);
                if (btn != null) { 
                    btn.click();
                    event.keyCode = 0
                } 
            }
        }
</script>

within the aspx

 <form id="form1" runat="server">
    <div>
    <asp:LinkButton ID="newBtn" runat="server" OnClick="btnLogin_Click" Text="ASP Link" />
    <asp:TextBox ID="txtContainer" runat="server" Width="100" />
    <asp:Label ID="time_lbl" runat="server" />
    </div>
    </form>

and within the code behind aspx.cs

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                txtContainer.Attributes.Add("onKeyPress", "doClick('" + newBtn.ClientID + "',event)");
            }

        }       

        public void btnLogin_Click(object sender, EventArgs e)
        {
            time_lbl.Text = txtContainer.Text;
        }

The above code works fine in FF and IE however chrome continues to submit the entire form vs. capturing the keypress on the enterkey.

Thank you for any suggestions.

I have a question along the same vein as the one asked here regarding how the enter key is handled in chrome.

The effect I am trying to acplish is to allow the enter key to call a click event of one a button while focus in within the current field. To acplish this I am using the following code:

javascript:

 <script type="text/javascript">
//attempting to capture keypress for chrome here but this is not working
        $("#txtContainer").keypress(function (e) {
            if (e.keyCode == '13') {
                e.preventDefault();
                doClick(buttonname, e);
                return false;
            }
        });

        function doClick(buttonName, e) {

            var key;
            if (window.event)
                key = window.event.keyCode;     //IE
            else
                key = e.which;     //firefox

            if (key == 13) {
                var btn = document.getElementById(buttonName);
                if (btn != null) { 
                    btn.click();
                    event.keyCode = 0
                } 
            }
        }
</script>

within the aspx

 <form id="form1" runat="server">
    <div>
    <asp:LinkButton ID="newBtn" runat="server" OnClick="btnLogin_Click" Text="ASP Link" />
    <asp:TextBox ID="txtContainer" runat="server" Width="100" />
    <asp:Label ID="time_lbl" runat="server" />
    </div>
    </form>

and within the code behind aspx.cs

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                txtContainer.Attributes.Add("onKeyPress", "doClick('" + newBtn.ClientID + "',event)");
            }

        }       

        public void btnLogin_Click(object sender, EventArgs e)
        {
            time_lbl.Text = txtContainer.Text;
        }

The above code works fine in FF and IE however chrome continues to submit the entire form vs. capturing the keypress on the enterkey.

Thank you for any suggestions.

• javascript
• jquery
• asp

Share Improve this question Follow edited May 23, 2017 at 10:34 CommunityBot 111 silver badge asked Feb 14, 2012 at 22:02 rlcrewsrlcrews 3,5622121 gold badges7272 silver badges121121 bronze badges 3

• 4 Try using e.which === 13 instead of e.keyCode. With the keypress() event I've had problems like that, and e.which seems to solve it. Otherwise, just use keyup() or keydown(); – elclanrs Commented Feb 14, 2012 at 22:07
• Did either of these help you? I am ing across the same issue and these didn't solve my problem – TheLifeOfSteve Commented Jul 11, 2012 at 19:43
• @Steve No I have since found numerous references to this problem from others but no solution. It appears to be linked to how chrome manages the enter key and submission of a form. If I ever do solve it I'll post the answer here. – rlcrews Commented Jul 12, 2012 at 0:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

I would say that using 'keyup' instead of 'keypress' should solve your problems

You may try this in your keypress event

    $("#txtContainer").keypress(function (e) {
        e.preventDefault();
        var key = window.event ? e.keyCode : e.which;
        if (key == '13') {
            doClick(buttonname, e);
        }
    });

Note: var key = window.event ? e.keyCode : e.which; and e.preventDefault() should be placed at first and return false; is not required because you've used e.preventDefault().

This should also do the job:

var key = e.keyCode || e.which;
if(key === 13 { /* your code */ }

本文标签： javascriptonKeypress Enter Key event on textfield not working in ChromeStack Overflow