Позволяет пользователю заполнять несколько полей формы непрерывно

У меня есть следующее поле в моей форме, где пользователь должен ввести 10-значное число.Позволяет пользователю заполнять несколько полей формы непрерывно

Представляю число в 3 отдельных областях (3-3-4):

Phone: [_ _ _]-[_ _ _]-[_ _ _ _]

Код:

 <div id="phone-element" class="form-element"> 
     <input type="tel" size="3" name="phone1" id="phone1" maxlength="3" tabindex="3" pattern="[0-9]{3}" title="3 digit phone number. Eg.808" required=""> <span class="wc_sep">-</span> 
     <input type="tel" size="3" name="phone2" id="phone2" maxlength="3" tabindex="4" pattern="[0-9]{3}" title="3 digit phone number. Eg.789" required=""> <span class="wc_sep">-</span> 
     <input type="tel" size="4" name="phone3" id="phone3" tabindex="5" pattern="[0-9]{4}" maxlength="4" title="4 digit phone number. Eg.1374" required=""> 
     </div>

Но в настоящее время между каждым полем, пользователям необходимо поместить их мышью в следующем поле, чтобы продолжить вводить число.

Как я могу сделать это непрерывно?

источник

2016-08-10 rockyraw

Лучшее, что вы можете сделать здесь использовать поле ввода _one_; пользователи знают, как они работают. Любые причудливые вещи JS, которые заставляют фокус переходить из одного поля в другое и аналогичного, просто уменьшают удобство использования. Современные браузеры позволяют заполнять формы с помощью значений, введенных пользователем в их настройках; если бы вы попросили мой номер телефона, но затем использовали такую конструкцию, которая сделала бы это сбоем - это также было бы ошибкой UX. Или, возможно, у меня есть копия и копирование номера телефона - снова вам придется перепрыгнуть через множество обручей с помощью JS, чтобы они работали правильно с такими ненужными разрывами полей ввода. – CBroe

Думаю, я должен подумать об этом. Я просто думаю, что, возможно, это более «аккуратно», и будет поощрять пользователей заполнять его. как работает автозаполнение браузера? при тестировании моего текущего кода автозаполнение отлично работает, хотя все 3 поля разделены. это работает, потому что идентификатор «телефон-элемент»? beacuse в css/js У меня нет настроек для этого id, не знаю, почему prtogrammer назвал его таким образом, если только это не связано с автозаполнением. – rockyraw

Существует «обычное» автозаполнение, основанное на данных, ранее введенных в поля формы с тем же именем; а затем выполняется автозаполнение на основе настроек браузера (где пользователи могут вводить свои личные данные, такие как имя, адрес электронной почты, телефон и т. д.), где браузер пытается найти соответствующие поля для данных, основанных на именах полей. (У Google есть информация о том, как назвать поля для этого здесь, https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=ru) – CBroe

Это можно сделать с помощью jQuery, проверив length введенного значения (на клавиатуре) против maxlength, который вы установили на входах. Если length значения входного соответствует maxlength на входе, а затем focus следующий вход:

$(function() { 
 
    $('input[type="tel"]').keyup(function() { 
 
    if (this.value.length === this.maxLength) { 
 
     $(this).nextAll('input[type="tel"]').first().focus(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="phone-element" class="form-element"> 
 
    <input type="tel" size="3" name="phone1" id="phone1" maxlength="3" tabindex="3" pattern="[0-9]{3}" title="3 digit phone number. Eg.808" required=""> 
 
    <span class="wc_sep">-</span> 
 
    <input type="tel" size="3" name="phone2" id="phone2" maxlength="3" tabindex="4" pattern="[0-9]{3}" title="3 digit phone number. Eg.789" required=""> 
 
    <span class="wc_sep">-</span> 
 
    <input type="tel" size="4" name="phone3" id="phone3" tabindex="5" pattern="[0-9]{4}" maxlength="4" title="4 digit phone number. Eg.1374" required=""> 
 
</div>

источник

2016-08-10 21:20:39 APAD1

Вам необходимо использовать JavaScript.

Прикрепите прослушиватель событий к входным элементам на keyup. Если длина поля соответствует вашей заданной длине, добавьте фокус в следующий элемент ввода.

например.

var phone1 = document.getElementById('phone1'); 
phone1.addEventListener('keyup', function() { 
    if (phone1.value.length === 3) { 
     document.getElementById('phone2').focus(); 
    } 
});

Вам может понадобиться, чтобы удовлетворить любые крайние случаи, которые вы найдете, чтобы убедиться, что UX является гладким, но это должно вам начать работу.

источник

2016-08-10 21:13:20 Stephen

Вы можете использовать JQuery

<html> 
    <head> 
    <title></title> 
    <meta content=""> 
    <style></style> 
    <script type="text/javascript" src="jquery.js"></script> 
    </head> 
    <body> 
    <input type="text" name="" id="field1"> 
    <input type="text" name="" id="field2"> 
    <input type="text" name="" id="field3"> 

    <script type="text/javascript"> 
     $(function(){ 
     var field1 = $("#field1"); 
     var field2 = $("#field2"); 
     var field3 = $("#field3"); 
     field1.on("keyup", function(e){ 
      if(field1.val().length == 3) 
      { 
       field2.focus(); 
      } 
     }) 

     field2.on("keyup", function(e){ 
      if(field2.val().length == 3) 
      { 
       field3.focus(); 
      } 
     }) 
     }) 
    </script> 
    </body> 
</html>

источник

2016-08-10 21:36:44

Это может быть упрощено довольно бит, нет причин указывать разные события для каждого отдельного входа. – APAD1

Позволяет пользователю заполнять несколько полей формы непрерывно

ответ

Смежные вопросы