Я создаю форму для веб-сайта, но сейчас она позволяет мне перемещаться только с телефона вниз. Я не могу перейти от имени к фамилии к телефону. как мне изменить его, чтобы я мог просмотреть все это?
<form data-customer-information-form = "true" autocomplete = "off" method = "POST" action = "addticket/submit" name = "ticketForm" id = "ticketform" accept-charset = "UTF-8">
<p>
<label for = "customerFirstName">First Name:</label></br>
<input type = "text" name = "customerFirstName" id = "customerFirstName" placeholder = "first name" pattern = "[A-Za-z]+" required>
</p>
<p>
<label for = "customerLastName">Last Name:</label></br>
<input type = "text" name = "customerLastName" id = "customerLastName" placeholder = "last name" required>
</p>
<p>
<label for = "phoneNumber">Phone: used for contact</label></br>
<input type = "tel" id = "phone" maxlength = "12" name = "phoneNumber" placeholder = "phone" pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
</p>
<p>
<label for = "email">Email:</label></br>
<input type = "email" name = "email" id = "email" placeholder = "email">
</p>
<p>
<label for = "service">Computer/Service Name:</label></br>
<input type = "text" name = "service" placeholder = "computer model or service" required>
</p>
<p>
<label for = "description">Anything else we need to know:</label></br>
<textarea type = "text" maxlength = "200" name = "description" id = "description" placeholder = "What's gone wrong?"></textarea>
</p>
<input type = "submit" name = "submit" value = "Submit" id = "submit">
</form>
Когда я скопировал HTML в программу просмотра HTML, он отлично работает. Но в остальной части страницы он перестает работать.
Не уверен, почему он не позволяет вам использовать вкладку как есть, но вы можете попробовать установить свойство tabindex
:
<form data-customer-information-form = "true" autocomplete = "off" method = "POST" action = "addticket/submit" name = "ticketForm" id = "ticketform" accept-charset = "UTF-8">
<p>
<label for = "customerFirstName">First Name:</label></br>
<input tabindex = "0" type = "text" name = "customerFirstName" id = "customerFirstName" placeholder = "first name" pattern = "[A-Za-z]+" required>
</p>
<p>
<label for = "customerLastName">Last Name:</label></br>
<input tabindex = "0" type = "text" name = "customerLastName" id = "customerLastName" placeholder = "last name" required>
</p>
<p>
<label for = "phoneNumber">Phone: used for contact</label></br>
<input tabindex = "0" type = "tel" id = "phone" maxlength = "12" name = "phoneNumber" placeholder = "phone" pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
</p>
<p>
<label for = "email">Email:</label></br>
<input tabindex = "0" type = "email" name = "email" id = "email" placeholder = "email">
</p>
<p>
<label for = "service">Computer/Service Name:</label></br>
<input tabindex = "0" type = "text" name = "service" placeholder = "computer model or service" required>
</p>
<p>
<label for = "description">Anything else we need to know:</label></br>
<textarea tabindex = "0" type = "text" maxlength = "200" name = "description" id = "description" placeholder = "What's gone wrong?"></textarea>
</p>
<input tabindex = "0" type = "submit" name = "submit" value = "Submit" id = "submit">
</form>
Убедитесь, что ваш javascript не блокирует определенные клавиши.
document.getElementById("customerFirstName").onkeydown = function(e){
if (!(e.keyCode === 8 || e.keyCode ===46 || keypress.keyCode === 9)){
if (!(/[A-Za-z]/i.test(String.fromCharCode(e.keyCode)))) {
e.preventDefault();
return false;
}
}
}