Переместить курсор в конец значения на мобильном телефоне для ввода

Question

У меня есть ввод:

<input type="text" id="input">

Когда пользователь вводит 3 цифры, добавляется (), чтобы окружить эти 3 цифры:

var inp = $('#input');
inp.on('input', function (e) {
    var curchr = this.value.length;
    var curval = input.val();
    if (curchr == 3 && curval.indexOf('(') < 0 && curval.indexOf(')') < 0) {
        inp.val('(' + curval + ')' + " ");
    }
});

Так что, если я наберу 123, Становится (123).

Отлично работает на рабочем столе, но на мобильном месте курсор не обновляется. Как будто я ввожу 123, он становится (123) Но место курсора (12|3), а не (123) |.

| представляет курсор здесь.

Я искал Решение и попробовал:

this.selectionStart = this.selectionEnd = this.value.length;

и:

inp.focus().val(inp.val());

Но безуспешно.

Answer 1

Вы можете проверить длину из строки;

$('#input').keyup(function(e){
  var val = $(this).val();
  var which = e.keyCode;
   if(val.length == 3) {
     $(this).val('('+$(this).val()+')');
     if(which == 8) {
       $(this).val('');
     }
   }
});

Answer 2

let telEl = document.querySelector('#phoneNum')

telEl.addEventListener('keyup', (e) => {
  let val = e.target.value;
  e.target.value = val
    .replace(/\D/g, '')
    .replace(/(\d{1,3})(\d{1,4})?(\d{1,4})?/g, function(txt, f, s, t) {
      if (t) {
        return `(${f}) ${s}-${t}`
      } else if (s) {
        return `(${f}) ${s}`
      } else if (f) {
        return `(${f})`
      }
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Phone Number: <input type="text" id="phoneNum" maxlength="14" />

Answer 3

Надеюсь, это поможет вам решить вашу проблему.

var inp = $('#input');

inp.on('input', function (e) {
    var curchr = this.value.length;
    var curval = inp.val();
    if (curchr == 3 && curval.indexOf('(') < 0 && curval.indexOf(')') < 0) {
        inp.val('(' + curval + ')' + " ");
        var inpLength = inp.val().length;
        inp.focus();
        inp[0].setSelectionRange(inpLength, inpLength);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input" />