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. Enhance User Experience – Move to the Next Input Field in GridView on Enter Key.

Usually, we use asp.net GridView to display thousands of data on our websites or web applications. Ofte, then 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 of these methods.

<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>