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

Solution 1

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.

Solution 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

Comments

[lu1s]

Did you try to add the e.preventDefault() just before the if statement?

[Sudhir Bastakoti]

try adding e.preventDefault()

[Arian]

@sundhir : I don't want add \t in my text inputs.I want set focus to next control

[Arian]

thanks it works for inputs 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

[Sudhir Bastakoti]

see edited code, added select also, should work for dropdown as well

[Arian]

Sorry but another problem your code cause I can't enter any text in text boxes