Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

replacing Enter key code with TAB key code in jQuery

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

like image 322
Arian Avatar asked May 02 '12 06:05

Arian


1 Answers

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.

like image 141
Sudhir Bastakoti Avatar answered Nov 03 '22 19:11

Sudhir Bastakoti