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

Question

я хочу сделать поле в Html, функционал примерно как у поля ввода категорий. То есть человек вводит слово, нажимает enter, это слово сохраняется, после него ставится разделитель и человек может вставить новое слово. Можно ли такое реализовать стандартными средствами js или jquery?

Функционал такой же как у поля "Метки" на этом сайте.

Answer 1

Для наглядности:

let tmpTAG = '<div class="tag">%VALUE%<div class="-del"></div></div>', // Некий аналог шаблона элемента который будет идти в output
    output = document.querySelector('.output'); // Поле output'а

document.querySelector('#enter_word').addEventListener('keydown', function(e) { // Вешаем обработчик на enter_word, на нажатие клавиши
  if(e.key.toLowerCase() === 'enter' || e.code.toLowerCase() === 'enter') { // По нажатию кнопки Enter выполняем действие
    let val = e.target.value.trim(); // Получаем значение инпута, и удаляем лишние проблемы в начале и конце строки
    e.target.value = ''; // Очищаем поле ввода
    output.insertAdjacentHTML('beforeEnd', tmpTAG.replace(/%VALUE%/gm, val)); // Вставляем наш шаблон, предварительно заменив в шаблоне %VALUE% на содержимое переменной val
  }
});

output.addEventListener('click', function(e) { // Чтобы удалять, вешаем обработчик на output при клике
  if(e.target.classList.contains('-del')) { // для упрощения используем делегированное события, проверяя что клик был сделан внутри output, но по классу .-del
    e.target.closest('.tag').remove(); // Берём нажатый .-del, возвращаемся к родитлею .tag и удаляем.
  }
});

.output .tag {
  display: inline-block;
  margin-top: 1em;
}

.output {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 10px;
}

.output .tag {
  display: block;
  background: #07f;
  color: #fff;
  padding: .25em .5em;
  margin: 0 3px 3px 0;
  box-sizing: border-box;
}

.output .tag .-del {
  display: inline-block;
  margin-left: .5em;
  cursor: pointer;
}

.output .tag .-del::before {
  content: '✖';
  display: inline-block;
}

.output .tag .-del:hover::before {
  color: red;
}

<input type="text" placeholder="Введите название метки" id="enter_word">

<div class="output"></div>

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

БЛОГ НА HUSL

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

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