رفتن به کنترل بعدی در وب فرم با زدن دکمه Enter

[MasoudAdmin]

با درود خدمت همه.
من در وب فرمم چندین Textbox دارم که می خوام کاربر به جای اینکه با کلید Tab به کنترل بعدی بره با زدن دکمه Enter همون کار Tab رو انجام بده. چند نمونه کد پیدا کردم ولی کار نمیکنه
این رو تو قسمت Head اضافه کردم

<script type ="text/javascript" >

        function FocusNext(cid) {

            var i = document.getElementById(cid.id).getAttribute('tabi  ndex');

            var iKeyCode = 0;

            if (window.event)

                iKeyCode = window.event.keyCode

            else if (e)

                iKeyCode = e.which;

            if (iKeyCode == 13) {

                var ctrl = document.all;

                for (var count = 0; ctrl.length; count++) {

                    if (ctrl[count].tabIndex == i + 1) {

                        ctrl[count].focus();

                    }

                }

            }

            else

                return true;

        }

      </script>

بعد هم در رویداد onkeypress تکست باکسم این رو قرار دادم onkeypress="FocusNext(this)"

ضمنا باید اضافه کنم در فرمم بنا به دلایلی از ScriptManager و UpdatePanel استفاده کردم.
ممنون میشم راهنمایی کنید

[_behnam_]

سلام. میتونید توی فرمتون برای فیلدهاتون صفت (attribute) tabindex قراربدید با مقدار اون رو برابر با اولویت هر فیلد قرار بدید.
مثلا :

فیلد اول tabindex="1"

فیلد دوم tabindex="2"

...

الی آخر

و بعد از کد jquery زیر استفاده کنید.

$(document).on('keypress', 'input', function (e) {

    if (e.which == 13) {

        e.preventDefault();

        if($(this).attr('type')=='submit')

        {

            $('form').submit();

        }

        else{

        $('[tabindex="'+(this.tabIndex+1)+'"]').focus();

        }

       

    }

});

این کد با فشرده شدن کلید اینتر فوکس رو چک میکنه ببینه روی کدوم فیلد هست و tabindex فیلد رو میگیره با عدد 1 جمع میکنه و فوکس رو روی المنتی قرار میده که tabindex برابر با حاصل جمع هست.

****درحالت پیشفرض وقتی روی فیلدی از یک فرم باشید و اینتر رو بزنید اون فرم submit میشه. پس توی کد بالا اول جلوی submit شدن فرم با اینتر رو گرفتیم و درنهایت چک میکنیم اگر فوکس روی submit فرم بود فرم رو submit کنه.

بررسی کد :
https://jsfiddle.net/berad/syexcjo4/

[MasoudAdmin]

با درود و ادب
جساراتا عرض کرده بودم از TextBox استفاده کردم. خود کنترل TextBox گزینه TabIndex رو داره که من ست کردم.

<div>                            <asp:TextBox ID="txtBlockNo" runat="server" name="txtBlockNo" placeholder="بلوک/فاز" class="form-control form-control-sm placeholder-wave text-center" Width="200px" TabIndex="1" MaxLength="10"></asp:TextBox>                        </div>

ولی باز کار نمیکنه

[_behnam_]

سلام مجدد
کدی که قرار دادم با استفاده از jquery هست. به قالب اضافه شده؟
مورد بعدی خود کلمه TabIndex هست. وقتی پروژه رو اجرا کردید . توی قسمت سورس html پروژه از توی مرورگر بررسی کنید که درنهایت TabIndex با حروف بزرگ T و I هست؟ اگر که حروف بزرگ بودن پس شما باید توی کدهای موربوط tabindex رو به TabIndex تغییر بدید.

[MasoudAdmin]

با درود و ادب
من با کد جاوااسکریپت و در body این کد رو گذاشتم

<script type="text/javascript">

            $(document).on('keypress', 'input', function (e) {

                if (e.which == 13) {

                    e.preventDefault();

                    if ($(this).attr('type') == 'submit') {

                        $('form').submit();

                    }

                    else {

                        $('[TabIndex="' + (this.tabIndex + 1) + '"]').focus();

                    }





                }

            });

        </script>

که کار نمیکنه

[mazoolagh]

سلام و روز خوش

جناب بهنام مشخص و بعد هم تاکید کردن که از کتابخانه jquery استفاده شده؛

باید یک رفرنس به کتابخونه اش به header اضافه کنین،
1- حالا یا به cdn ش مثل:

<script  src="https://code.jquery.com/jquery-3.7.1.js"

  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="

  crossorigin="anonymous"></script>

یا مثل این

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

2- یا فایلش رو دانلود کنین روی سرور خودتون - شبیه این:

<script src="/scripts/jquery-3.7.1.js"></script>

اگر به هر دلیل نمیخواین از jquery استفاده کنین،
باید javascript خالص (معروف به vanilla) بنویسین.

[MasoudAdmin]

بله در پروژه ای که دارم کار می کنم هم از JQuery و هم از BootStrap استفاده کردم و در Body فرمم هم اضافه کردم

<script src="../JSFiles/bootstrap.bundle.min.js"></script>

    <script type="text/javascript" src="../JSFiles/jquery-3.7.1.min.js"></script>

آیا باید در رویدادهای TextBox مثلا onkeypress هم کاری انجام بدم؟ اگر جواب مثبت هست چجوری باید تابع Jquery رو در اون رویداد فراخوانی کنم؟

[mazoolagh]

خب یک جای کار رو قطعا دقت نکردین،
وگرنه کد آقای بهنام درسته
و البته که دیگه نباید برای تکسباکس ها onkeypress بذارین!

چند نکته دیگه هم اینجا هست:

1- در کد پست 1 که خودتون گذاشتین یک preventdefault نیاز هست
که دیده نمیشه!
وگرنه enter همون رفتار خودش رو نشون میده.
و البته کد تمیزی هم نیست!

2- رخداد onkeypress دیگه کلا از رده خارج هست و نباید استفاده کنین.
به جای اون از keydown استفاده کنین.

3- کد آقای بهنام تشخیص enter رو برای کل داکیومنت دربرمیگیره (برای همین نیاز هست که مشخص بشه enter روی دکمه submit زده شده یا نه)،
که اگر فقط یک فرم داشته باشین و همه input ها در این فرم باشن مشکلی نیست،
ولی اگر چند فرم داشته باشین یا input ها در چند دسته باشن باید ویرایش بشه.
در کل کد درسته و کار میکنه.

[mazoolagh]

من با جاوااسکریپت خالص (بدون نیاز به jquery یا کتابخونه دیگه)
یک نمونه میذارم (کل کد پیج رو پیوست کردم تا بتونین با پیج خودتون مقایسه کنین و ببینین کجا مشکل هست).

تشخیص keydown رو فقط به inputهای یک فرم معین (اینجا فرم با id=form1) به جز دکمه submit محدود کردم،
پس دیگه نیازی نیست که چک بشه آیا enter روی دکمه submit هست یا نه.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="BN588949.aspx.vb" Inherits="aspnet_vb_tests.BN588949" %>





<!DOCTYPE html>





<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style>

        #form1 input {

            display: block;

            margin: 5px;

        }

    </style>

    <script>

        document.addEventListener("DOMContentLoaded", function () {

            document.querySelectorAll('#form1 input[tabindex]:not([type="submit"])')

                .forEach((input) => {

                    input.addEventListener('keydown', function (event) {

                        if (event.keyCode == 13) {

                            event.preventDefault();

                            document.querySelector(`#form1 input[tabindex="${this.tabIndex + 1}"]`).focus();

                        }

                    })

                })

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:TextBox ID="TB1" runat="server"

                placeholder="field 1"

                TabIndex="1">

            </asp:TextBox>

            <asp:TextBox ID="TB2" runat="server"

                placeholder="field 2"

                TabIndex="2">

            </asp:TextBox>

            <asp:TextBox ID="TB3" runat="server"

                placeholder="field 3"

                TabIndex="3">

            </asp:TextBox>

            <asp:TextBox ID="TB4" runat="server"

                placeholder="field4"

                TabIndex="4">

            </asp:TextBox>

            <asp:Button ID="BTN_Submit" runat="server"

                Text="submit"

                TabIndex="5" />

        </div>

    </form>

</body>

</html>

[mazoolagh]

همین رو اگر با jquery پیاده کنین:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="BN588949_jquery.aspx.vb" Inherits="aspnet_vb_tests.BN588949_jquery" %>



<!DOCTYPE html>





<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style>

        #form1 input {

            display: block;

            margin: 5px;

        }

    </style>

    <script src="scripts/jquery-3.7.1.js"></script>

    <script>

        $(document).ready(function () {

            $('#form1 input[tabindex]:not([type="submit"])')

                .on('keydown', function (event) {

                    if (event.keyCode == 13) {

                        event.preventDefault();

                        $('#form1 input[tabindex="' + (this.tabIndex + 1) + '"]').focus();

                    }

                });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:TextBox ID="TB1" runat="server"

                placeholder="field 1"

                TabIndex="1">

            </asp:TextBox>

            <asp:TextBox ID="TB2" runat="server"

                placeholder="field 2"

                TabIndex="2">

            </asp:TextBox>

            <asp:TextBox ID="TB3" runat="server"

                placeholder="field 3"

                TabIndex="3">

            </asp:TextBox>

            <asp:TextBox ID="TB4" runat="server"

                placeholder="field4"

                TabIndex="4">

            </asp:TextBox>

            <asp:Button ID="BTN_Submit" runat="server"

                Text="submit"

                TabIndex="5" />

        </div>

    </form>

</body>

</html>

[MasoudAdmin]

با درود و ادب. سپاس فراوان.