ظاهر کلی برنامه به این صورت است:

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید.

ساختار فایل‌های این پروژه به صورت زیر است:

auto-jump
├── index.html
├── main.js
└── styles.css

جزئیات

در این سوال می‌خواهیم وقتی کاربر شماره کارت خود را وارد یا حذف کرد، به طور خودکار به input بعدی یا قبلی برود.

در این برنامه ما شاهد چهار input هستیم که هر کدام از آن‌ها، نماینده چهار رقم از شماره کارت هستند. هر کدام از از آن‌ها با data-order در HTML مشخص شده‌اند.

شما باید با از استفاده از JS، برنامه‌ای بنویسید که وقتی کاربر چهار رقم را وارد input کرد، به طور خودکار وارد input بعدی شود یا وقتی رقم‌ها را حذف کرد و input خالی شد، به input قبلی برود.

همچنین اگر کاربر خودش از input اول به input سوم برود، باید چینش و ترتیب حفظ شود و از همان input سوم، تایپ کردن ادامه پیدا کند و به input اول نرود.

نکات

• فرض می‌شود کاربر فقط عدد وارد می‌کند و طول هر input نیز توسط max-length در HTML مشخص شده است. پس نیازی نیست اعتبارسنجی این که کاربر به جای عدد، حروف وارد کند یا این که در هر input، چند رقم وارد کند توسط شما انجام شود.
• برای حل این سوال می‌توانید از keyboard events و متود focus کمک بگیرید.
• شما تنها مجاز به اعمال تغییرات در فایل main.js هستید و فایل ارسالی شما هم باید main.js باشد.