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

Question

[dgallyamshin]

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

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

Comments

[Ankhena]

Можно ли такое реализовать стандартными средствами js или jquery?

Несомненно.
Получаете значение инпута, записываете в любой тег, который вам нужен, стилизуете его, приделываете крестик для удаления. И т.д.

Что именно у вас не получается?

[dgallyamshin]

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

[Ankhena]

dgallyamshin, поле ввода не становится нередактируемым, оно просто сдвигается.

[dgallyamshin]

Ankhena, padding ставится?

[Ankhena]

dgallyamshin, эммм куда?

[Ankhena]

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

Answer 1

[Вадим]

Набросал на скорую руку, просто потому что было интересно, хотя, по хорошему, ответом на Ваш вопрос должны быть ссылки на изучение js и на habr.freelance, так как Вы не прикладываете своих попыток к вопросу, а значит это задание, а не вопрос.

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

Вёрстка:

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

JS:

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