زمانی در فرم لازم است که پس از درج فیلد و رسیدن فیلد به حداکثر ظرفیت (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 مشخص نموده اید می رسد نشانه گر را به صورت اتوماتیک به فیلد بعدی انتقال می دهد
سایر مقالات مرتبط :
- استفاده از گوگل ادز در ایران چگونه و چطور؟
- خرید سرور خارج از کشور از سرودیتا
- بهترین سئوکار خانم در ایران ❤️ | بهترین سئوکار خانم ایران
- قوی ترین باتری گوشی های سامسونگ و شیائومی در سال 2023
- سرور HP چیست؛ ۴ دلیل برای استفاده از آن
- با بهترین هاستینگ طراحان وب شمالغرب کشور آشنا شوید
- خلاقیت در تولید محتوا | جدیدترین متدهای افزایش خلاقیت محتوا ۲۰۲۳
- فروش مفتول گالوانیزه، سیم آرماتوربندی، سیم خاردار و فنس در فروشگاه اینترنتی حصارآنلاین
- تعمیر آنلاین ، مرکز تخصصی تعمیرات لوازم خانگی
- برد هوشمند چیست؟ + نحوه استفاده از وایت برد هوشمند
- راهنمای خرید عمده لوازم جانبی کامپیوتر
- افزایش سرعت سایت های شلوغ