زمانی در فرم لازم است که پس از درج فیلد و رسیدن فیلد به حداکثر ظرفیت (maxlength) تعریف شده آن نشانه گر به صورت اتوماتیک به فیلد بعدی انتقال یابد تا کاربر بتواند به راحتی فرم را تکمیل نماید. به عنوان مثال فرمی را در نظر بگیرید که در آن فیلدهایی برای گرفتن شماره تلفن و موبایل موجود است و به صورتی تعبیه گردیده که در آن کاربر در هر فیلد یک شماره را وارد می نماید. بهتر است برای کاربر پسند بودن فرم به گونه ای طراحی گردد که پس از درج یک شماره از یک فیلد نشانه گر به صورت اتوماتیک به شماره بعدی انتقال پیدا نماید تا لازم نباشد کاربر به صورت دستی این کار را انجام دهد. در این مقاله به شما نحوه جهش به فیلد فرم بعدی به محض رسیدن به حداکثر ظرفیت را با استفاده از JQuery آموزش خواهم داد.
در ابتدا می بایست کتابخانه Jquery را به لیست کتابخانه های صفحه وب سایت خود اضافه نمایید البته در صورتی که قبلا این کار را انجام نداده اید. می توانید این کتابخانه را از آدرس https://jquery.com دانلود نمایید:
سپس می بایست پلاگین مخصوص این را را در آدرس Jquery auto tab دانلود نموده و این پلاگین را نیز به کتابخانه های جاوا اسکریپت صفحه وب سایت خود اضافه نمایید.
سپس کافی است از کد زیر برای جهش از یک فیلد به فیلد بعدی استفاده نمایید:
$(document).ready(function() {
$(‘#first’).autotab({ target: ‘#second’, format: ‘numeric’ });
$(‘#second’).autotab({ target: ‘#third’, format: ‘numeric’, previous: ‘#first’ });
$(‘#third’).autotab({ previous: ‘#second’, format: ‘numeric’ });
});
</script>
که در مثال بالا می بایست مشخصه فیلد اول را در بخش اول هر سطر و مشخصه فیلدی که قصد دارید جهش به آن انجام گردد را در بخش دوم وارد نمایید. این کد زمانی که هر فیلد به حداکثر ظرفیتی که در هر کدام از فیلدها با تک maxlength مشخص نموده اید می رسد نشانه گر را به صورت اتوماتیک به فیلد بعدی انتقال می دهد
سایر مقالات مرتبط :
- زمینه های کاری مناسب برای یک برنامه نویس پایتون
- اهمیت سئو در دیده شدن و موفقیت کسب و کارها
- خرید شیبا از صرافی ارز دیجیتال
- آموزش خرید شیبا اینو از صرافی کیف پول من (تصویری 0 تا 100)
- خرید قالب سایت وردپرس با 13 نکته طلایی
- چرا طراحی سایت در مشهد اهمیت دارد؟ – وب سایت نقره ای
- چگونه محتوای سایت خود را از میلیونها محتوای موجود در اینترنت متمایز کنم؟
- ویژگی های بهترین شرکت طراحی سایت
- راهنمای کامل سئو داخلی سایت برای استارتآپها
- افزایش درآمد وکیل با طراحی سایت
- 5 سایت برتر ایرانی که با المنتور طراحی شده اند
- بهترین افزونه خروجی گرفتن از شماره موبایل کاربران در وردپرس و ووکامرس