Focus Next Textbox In Gridview On Enter Pressed

Hello Everyone! In this article, I want to share the method to enable focus next textbox in Gridview on the “Enter” key pressed using javascript.

Usually, we use asp.net GridView to display thousands of data on our websites or web application. Often admin can view the registered users on the website, but when an admin wants to edit or add any fraud or duplicate, or damaged data in GridView. To complete the job easily, the admin wants to use the Enter key to go to the next row. I share two methods. You can use one method them.


<script type="text/javascript">
   $(document).ready(function () {
        $("[id*=txtQuantity]").live("keypress", function (evt) {
            if (evt.keyCode == 13) {
                evt.preventDefault();
                var next = $(this).closest("tr").next().find("input[type=text]");;
                if (next.length > 0) {
                    next.focus();
               }
               else {
                    next = $("[id*=gvSelfTarget] input[type=text]").eq(0);
                    next.focus();
               }
            }
        });
    });
</script>

$(document).ready(function () {

$("[id*=txtQuantity]").live("keypress", function (evt) {

if (evt.keyCode == 13) {

evt.preventDefault();

var next = $(this).closest("tr").next().find("input[type=text]");;

if (next.length > 0) {

next.focus();

}

else {

next = $("[id*=gvSelfTarget] input[type=text]").eq(0);

next.focus();

}

});

</script>

Another method:


<script type="text/javascript">
    $("[id*=GridView1] input[type=text]".on("keypress", function  {
        if (e.keyCode == 13) {
            var next = $(this).closest("tr".next().find("input[type=text]"; ;
            if (next.length > 0) {
                next.focus();
 
            } else {
                next = $("[id*=GridView1] input[type=text]".eq(0);
                next.focus();
            }
            return false;
        }
    })
</script>