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

Question

[blogersha097]

допустим по умолчанию value="+"
суть - запретить его удалять

Answer 1

[imko]

function foo() {
	if (input.value.length) input.value = "+"
}
input.addEventListenter('change', foo)
input.addEventListenter('input', foo)

Просто добавляй если его стерли. Так можно сразу все ситуации охватить, и замены и удаления, и работает проще некуда

Comments

[blogersha097]

imko, так вроде не работает https://jsfiddle.net/xeaywu92/

[imko]

blogersha097, я в глаза долблюсь немного, букву лишнюю в имени метода написал и отрицание забыл

let input = document.querySelector('input');

function foo() {
	if (!input.value.length) input.value = "+"
}
input.addEventListener('change', foo)
input.addEventListener('input', foo);

надо ж свою голову иметь а не просто копировать

Answer 2

[Сергей Соколов]

// если первый символ не тот, прилепить его в начале
const keepPlus = event => {
  const symbol = '+';
  const {target} = event; // const target = event.target;

  if (target.value[0] !== symbol) {
    target.value = symbol + target.value;
  }
}

// проверять при любом изменении
document.querySelectorAll('input[type=text]')
  .forEach(el => el.addEventListener('input', keepPlus));

Здесь недостаток – помимо начального плюсика все прочие хотелки игнорируются. Например, юзер введёт ещё сотню плюсиков после первого, номер из всего 2 цифр и забудет указать код города. Юзеры они такие.

Вообще лучше посмотрите на input type="tel" и его атрибут pattern. Песочница.

а что UX?

С точки зрения пользовательского опыта, не факт, что непредсказуемый запрет на некие действия это хорошее решение. Может, лучше разрешить вводить как угодно, и потом уметь правильно это истолковать?
Если забыл код страны или города – взять из его геолокации; Ввёл одни цифры – молодец. Навставлял дефисов, точек и пробелов как разделителей, скобками выделил некоторые фрагменты – да и ладно – всё удалить, хранить только цифры. При выводе форматировать по-своему.

Answer 3

[dollar]

Вынести его за пределы инпута.
Как вариант - наложить его сверху полупрозрачностью, а текст внутри инпута сместить правее с помощью css.