Переход на следущий инпут

Question

Помогите, пожалуйста! у меня 2 интупа. первый показывает список телефонных кодов, сделан с помощью international telIinput. когда код выбран, необходимо автоматически перенести курсор во второй инпут для самого номера телефона. Сейчас, когда выбираю код, в первом инпуте моргает каретка. Или можно ли просто сделать так, чтобы эта каретка не показывалась?

Answer 1

У input есть метод focus, который можно использовать для ваших целей

const codeInput = document.getElementById('code');
const phoneInput = document.getElementById('phone');

codeInput.addEventListener('change', () => phoneInput.focus());

<input type='phone' id='code' /><input type='tel' placeholder='000 000 00' id='phone' />

У вас похоже какой-то прокаченный input для кода, но в любом случае, можно использовать событие change.

Answer 2

Можно сверстать элемент с выбором телефонного кода страны с помощью div, чтобы избавиться от видимого курсора. Для этого добавляйте класс к блоку при клике, а при клике по открытому div с классом, убирайте класс и перемещайте фокус с помощью HTMLElement.focus().

document.addEventListener("DOMContentLoaded", () => {
   const code = document.querySelector("#code"),
   nums = document.querySelector("#nums"),
   items = document.querySelectorAll('#code ul li');
   document.addEventListener('click', function(event){
      
      const target = event.target;
      
      
      if (target === code && code.classList.contains('active')) {
        code.classList.remove('active');
        nums.focus();
      } else if (target === code){
          code.classList.add('active');
      }
      
   });
   
   items.forEach(e => e.addEventListener('click', function(event){
      code.classList.remove('active');
        nums.focus();
   }));

});

* {
  box-sizing: border-box;
  padding: 0;
}

.cont {
  height: 30px;
  display: flex;
}
#code {
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 10px;
  border: 1px solid #000;
  margin-right: 10px;
  position: relative;
}

#nums {
  padding: 10px;
}

#code ul {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  background: blue;
  color: #fff;
  width: 30px;
  padding: 5px;
}

#code.active ul {
  display: block;
}

<div class="cont">
<div id="code">
   <div class="text-box">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
   </div>
</div>
<input id="nums" type="tel" placeholder="000 000 000">
</div>

БЛОГ НА HUSL

Переход на следущий инпут

Ответы (2 шт):