replacing Enter key code with TAB key code in jQuery

Question

I have a script in javascript that replace Enter with TAB key:

function ReplaceEnterWithTab() { if (event.keyCode == 13) event.keyCode = 9; return false; }

and I use it this way:

txt.Attributes.Add("OnKeyDown", "ReplaceEnterWithTab();");

this code work nice.Now I want to develop a script with jQuery that will not need to add OnKeyDown attribute.please consider this sample page:

<form id="form1" runat="server">
<div>
    <asp:TextBox ID="TextBox1" runat="server" CssClass="EntTab"></asp:TextBox>
    <br />
    <br />
    <asp:TextBox ID="TextBox2" runat="server" CssClass="EntTab"></asp:TextBox>
    <br />
    <br />
    <asp:DropDownList ID="DropDownList1" runat="server" CssClass="EntTab">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
    </asp:DropDownList>
    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>

I write this code :

$(document).ready(function () {

        $('.EntTab').on('keydown', function (e) {
            if (e.keyCode == 13) e.keyCode = 9;
        });

    });

the problem is when I press Enter key on TextBox1, Button1 cause page post back. How I can solve this issue?

thanks

why not just call `ReplaceEnterWithTab` with `keydown` on your body tag? that way, all the elements will work. — Ray Cheng, May 02 '12 at 07:29

Sudhir Bastakoti · Accepted Answer · 2012-05-02T07:27:01.230

7

Try:

$(document).ready(function () {
    $(".EntTab").bind("keypress", function(e) {

        if (e.keyCode == 13) {
            var inps = $("input, select"); //add select too
            for (var x = 0; x < inps.length; x++) {
                if (inps[x] == this) {
                    while ((inps[x]).name == (inps[x + 1]).name) {
                    x++;
                    }
                    if ((x + 1) < inps.length) $(inps[x + 1]).focus();
                }
            }   e.preventDefault();
        }
    });
});

Did you mean something like that.

edited May 02 '12 at 07:27

answered May 02 '12 at 06:39

Sudhir Bastakoti

99,167
15
158
162

try adding e.preventDefault() – Sudhir Bastakoti May 02 '12 at 06:55
@sundhir : I don't want add `\t` in my text inputs.I want set focus to next control – Arian May 02 '12 at 07:00
thanks it works for `input`s and I change it to `.EntTab`.it has a problem that when `DropDownList1` got focus and I press `Enter` key I got an error message – Arian May 02 '12 at 07:16
see edited code, added select also, should work for dropdown as well – Sudhir Bastakoti May 02 '12 at 07:17
Sorry but another problem your code cause I can't enter any text in text boxes – Arian May 02 '12 at 07:23

score 2 · Answer 2 · edited May 23 '17 at 11:46

2

You forgot to cancel the event propagation, add return false to the keydown callback:

$(document).ready(function () {
    $('.EntTab').on('keydown', function (e) {
        if (e.keyCode == 13) e.keyCode = 9;
        return false;
    });
});

Also, Button tag in ASP.NET has UseSubmitBehavior flag set to true by default, which causes the button to be rendered as input type="submit" tag. Try setting it to false, to get the behavior like described in the following answer: Use Javascript to change which submit is activated on enter key press

edited May 23 '17 at 11:46

Community

1
1

answered May 02 '12 at 06:39

Artem Koshelev

10,548
4
36
68

Did you try to add the `e.preventDefault()` just before the if statement? – lu1s May 02 '12 at 06:48

replacing Enter key code with TAB key code in jQuery

2 Answers2