Блог

Я создаю форму для веб-сайта, но прямо сейчас она позволяет мне просматривать только с телефона. Я не могу переходить от имени к фамилии к телефону. как мне изменить его, чтобы я мог просматривать табуляцию по всей форме?

 <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;
            }
            }
        }