@dgallyamshin

Как сделать поле ввода html для ввода меток и ключевых слов?

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

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

60b507ad12e73103585993.jpeg
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ответы на вопрос 1
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
Набросал на скорую руку, просто потому что было интересно, хотя, по хорошему, ответом на Ваш вопрос должны быть ссылки на изучение js и на habr.freelance, так как Вы не прикладываете своих попыток к вопросу, а значит это задание, а не вопрос.

В демке ниже используются следующие техники:

Вёрстка:
  • flexbox
  • HTML-мнемоники (для крестика на кнопке)

JS:
  • Обработка событий, в том числе полей формы (change)
  • Поиск и создание элементов
  • Делегирование событий (в функции onSelectorClick определяется что если клик произошёл на кнопку с крестиком, то удалить родительский элемент кнопки. В итоге получаем всего один слушатель на все элементы selector сколько бы их не было.)
  • Замыкания. Позволили нам найти все нужные html элементы один раз(поиск элементов в DOM одна из самых дорогих операций), а потом просто обращаться к переменным, в которые мы их сохранили из функций.

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы