برای مشکل اول: چون ورودی hidden قابلیت فوکوس نداره باید یه شرط بذاری که اگه ورودی بعدی که میخوای روش فوکوس کنی نوعش hidden بود بره روی ورودی بعد از hidden.
برای مشکل دوم: باید یه شرط بذاری که اگه نوع ورودی submit بود فرم ارسال بشه.
برای مثال:
محتوای فایل html:
کد:
<html>
<body>
<form action="ContactProcessor.php" class="contact-form">
<input placeholder="Full name" class="contact-input"/>
<br />
<input placeholder="Phone number" class="contact-input"/>
<br />
<input type="hidden" class="contact-input"/>
<br />
<input type="submit" class="contact-input"/>
</form>
</body>
</html>
محتوای فایل js:
کد:
$('.contact-form .contact-input').keydown(function (e) {
// اگر کلید وارد شده اینتر باشه کدهای داخل شرط اجرا میشه
if (e.which === 13) {
// ایندکس ورودی بعدی رو میگیره
var nextInputIndex = $('.contact-input').index(this) + 1;
// نوع ورودی بعدی رو مشخص میکنه
var inputType = $('.contact-input').eq(nextInputIndex).attr('type');
// اگه فیلد ورودی از نوع هیدن باشه یک واحد به ایندکس اضافه
// میشه و نوع ورودی بعدی گرفته میشه تا بر روی ورودی بعدی فوکوس بشه
if (inputType == 'hidden')
{
nextInputIndex += 1;
inputType = $('.contact-input').eq(nextInputIndex).attr('type');
}
// بر روی ورودی بعدی فوکوس میکنه
$('.contact-input').eq(nextInputIndex).focus();
// اگه نوع ورودی submit نباشه فرم ارسال نمیشه
// اما اگه submit باشه بعد از فوکوس شدن روی دکمه فرم ارسال میشه
if (inputType != 'submit')
// از ارسال شدن فرم جلوگیری میکنه
e.preventDefault();
}
});
محتوای فایل css:
کد:
.contact-form {
margin: auto;
text-align: center;
}
.contact-input {
padding: 8px 16px;
margin: 8px;
}
.contact-input:focus {
outline: 3px dotted #3399ff;
}