استفاده از کلید اینتر بجای TAB

استفاده از کلید اینتر بجای TAB

در برنامه های تحت وب گاهی لازمه برای سرعت بخشیدن به کار کاربر بجای استفاده از کلید Tab جهت رسیدن به فیلد بعدی، از کلید Enter  استفاده نمود. برای این منظور روش های متعددی میشه استفاده کرد ولی بهترین و ساده ترین راه برای اینکار بکارگیری کدهای جاوااسسکریپ هست. در ادامه کدی با شبه زبان جاوااسکریپت گذاشته شده که باعث میشود تا کاربر با هر بار زدن کلید Enter عملکرد کلید Tab را شاهد باشد. این روال تا رسیدن به یک دکمه اصطلاحا Submitt ادامه خواهد داشت.

<script type="text/javascript">
    $(document).ready(function () {
        $("input").not($(":button")).keypress(function (evt) {
            if (evt.keyCode == 13) {
                iname = $(this).val();
                if (iname !== 'Submit') {
                    var fields = $(this).parents('form:eq(0),body').find('button, input, textarea, select');
                    var index = fields.index(this);
                    if (index > -1 && (index + 1) < fields.length) {
                        fields.eq(index + 1).focus();
                    }
                    return false;
                }
            }
        });
    });
</script>

عملکرد این کد به این صورت است که در هنگام لود شدن صفحه اجرا میشود و در ابتدا چک میکند که کنترل از نوع button  نباشد سپس اگر در کنترلی که Focus را در اختیار دارد رویداد keypress  رخ دهد بررسی میشود که این رویداد فرشدن کلید Enter هست یا خیر در صورتی که جواب مثبت باشد تب ایندکس را یکی به جلو برده که در نتیجه تمرکز به کنترل بعدی انتقال پیدا میکند.

نکته:  کد فوق  در مورد کنترل DropdwonList عمل نخواهد کرد. برای این منظور باید کد را اصلاح کنید و و در خط سوم که بررسی میشود کنترل از نوع input باشد نوع select  را نیز اضافه کنید

مرتضی جنگجو

برنامه نویس fullstack با بیش از 14 سال سابقه کار و همکاری در توسعه و پیاده سازی نرم افزارهای تحت وب با تکنولوژی Net. در شرکتهای بزرگ ایرانی، هلندی، فنلاندی و ترکیه

شبکه های اجتماعی نویسنده

دیدگاه کاربران