Как запретить удаление первых символов в input?

16 мая 2021, 03:30

Есть поле ввода (input), в котором через JavaScript автоматом прописывается начальное значение из трех символов. С помощью такого скрипта я запрещаю удаления этих трех символов:

$(document).on('keydown', function(e) {
  if (e.keyCode == 8 && $('#input-new').is(':focus') && $('#input-new').val().length < 4) {
    e.preventDefault();
  }
});

Но если написать в поле ввода минимум четвертый символ, а после нажать Ctrl+A, или иначе выбрать весь текст, или переместить курсор к началу и нажать Backspace, то удаление сработает.

Как можно полностью запретить удаление первых трех символов?

Answer 1

Можно никого никуда не запрещать) А при отправке - собрать числа из двух элементов.

#first, #last { 
  background-color: white; 
  border: 1px solid #aaa; 
  font-size: 18px; 
  line-height: 22px; 
  font-family: 'Verdana'; 
  padding: 5px; 
  box-sizing: blorder-box; 
  display: inline; 
  outline: none; 
} 
#first {   
  border-right: none; 
} 
#last {   
  border-left: none; 
}

<span id="first" onclick="this.nextElementSibling.focus();">+8 123</span><input id="last">

Касаемо скрипта, если полноценно отслеживать backspace - в теории можно выделить всё и CTRL + V. Никто так делать не будет, но всё же... можно дать нормально вводить числа, а после каждого ввода первые 4 символа заменять на нужные:

// $('#bubu').on('input', function(){...}); 
 
document.getElementById('bubu').addEventListener('input', function(){ 
  this.value = "+123" + this.value.slice(4); 
});

#bubu { font-size: 50px; }

<input id="bubu" value="+123">

Answer 2

Вариант без скрипта.

Поверх ввода располагаем span с текстом, который не должен удаляться.

.control { 
  position: relative; 
} 
 
input { 
  padding-left: 23px; 
} 
 
.prefix { 
  position: absolute; 
  top: 1px; 
  left: 5px; 
}

<div class="control"> 
  <input type="text"> 
  <span class="prefix">bla</span> 
</div>

Answer 3

$('#input-new').on("keydown", function(e) {
    // Запрет выделения ctrl + a
  if (e.ctrlKey && e.keyCode === 65) return false;
  // Запрет выделения клавишами
  if (e.shiftKey && ((e.keyCode === 37 && this.selectionStart < 4) || (e.keyCode === 39 && this.selectionStart < 3)
  || e.keyCode === 38 || e.keyCode === 40)) 
  return false;
  // Запрет удаления через backspace и del
  if (e.keyCode == 46 && this.selectionStart < 3)
    return false;
  else if (e.keyCode == 8 && this.selectionStart < 4)
    return false;
});

Попробуйте этот вариант. Вместо того, чтобы вешать глобальное событие я повесил событие на конкретное поле, в данном случае на #input-new. Решение правда может не работать в старых браузерах. Но вроде как код запрещает удаление первых 3х символов даже если переместим курсор куда угодно. Добавил еще обработку клавиши DEL так как ей тоже можем удалять текст. Так же запретил выделение через клавиши. Мышкой правда все равно можно выделять и проблема остается. Можно конечно попробовать запретить выделять текст вообще и тогда проблема решится. Правда решение будет длиннее и возможно работать с таким полем будет не совсем удобно.