Javascript-форум - Как сделать поле ввода тегов\меток на чистом js

Цитата:

Сообщение от gunner17

При вводе запятой или нажатии клавиши Enter весь введённый текст должен превратиться в тег.

Смотрите пример ниже.

Цитата:

Сообщение от gunner17

По клику на тег, он должен удалиться из текстового поля.

Сделал, чтобы удалялся при долгом нажатии на экран или вызове контекстного меню вторичной кнопкой мыши, поскольку очень легко удаляется при обычном нажатии.

Также можно перемещаться между тегами при помощи стрелок и теги удаляются, как обычный текст, при помощи клавиш BackSpace и Delete.

<body><script>

class TagsField extends HTMLElement {
	constructor() {
		super();
		this.attachShadow({ mode: "open" });
		this.shadowRoot.innerHTML = `
			<style>
				span {
					background-color: #4CAF50;
					color: white;
					text-shadow: 0 1px rgba(0, 0, 0, 0.5);
					box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.2);
					border-radius: 1em;
					padding: 0.45em 0.8em;
					margin: 0.1em;
					display: inline-block;
				}

				label {
					border: 1px solid #ccc;
					border-radius: .5em;
					padding: .5em;
					display: inline-flex;
					font: bolder 100% sans-serif;
					flex-wrap: wrap;
					position: relative;
				}

				label::before {
					content: "Input tags";
					position: absolute;
					pointer-events: none;
					line-height: 0;
					top: 0;
					text-shadow: 2px 0 white, -2px 0 white;
				}

				input {
					all: unset;
					min-width: 5em;
					width: 0;
					padding: 0.45em 0.8em;
					margin: 0.1em;
				}
			</style>
			<label>
				<input>
			</label>
		`;
		this.input = this.shadowRoot.querySelector("input");
		this.label = this.shadowRoot.querySelector("label");
		this.input.value = "\u200b\u200b";

		this.inputHandler = this.inputHandler.bind(this);
		this.contextMenuHandler = this.contextMenuHandler.bind(this);

		"input focus keydown keyup touchstart touchmove click".split(" ").forEach(type => {
			this.input.addEventListener(type, this.inputHandler);
		});
		
		this.label.addEventListener("contextmenu", this.contextMenuHandler);
	}

	inputHandler(event) {		
		if(event.type !== "focus" && event.type !== "click") {
			if(
				this.input.selectionStart === 0 &&
				this.input.selectionEnd === 0
			) {

				if(this.input.previousElementSibling) {
					if(this.input.value.length === 1 || !this.input.value.startsWith("\u200b"))
						this.label.removeChild(this.input.previousElementSibling);
					else
						this.label.insertBefore(
							this.input.previousElementSibling,
							this.input.nextElementSibling
						);
				}
			}

			if(
				this.input.selectionStart === this.input.value.length &&
				this.input.selectionEnd === this.input.value.length
			) {
				if(this.input.nextElementSibling) {
					if(this.input.value.length === 1 || !this.input.value.endsWith("\u200b"))
						this.label.removeChild(this.input.nextElementSibling);
					else
						this.label.insertBefore(
							this.input.nextElementSibling,
							this.input
						);
				}
			}
		}

		var rawTags = this.input.value.slice(1, -1);

		if(event.type === "keyup" && event.key === "Enter") {
			rawTags += ",";
		}

		const tags = rawTags.split(",");
		const editableTag = tags.pop();

		tags.filter(tag => tag).map(this.constructor.createTag).forEach(tag => {
			this.label.insertBefore(tag, this.input);
		});

		this.input.value = `\u200b${editableTag}\u200b`;
		this.input.style.width = "0";
		this.input.style.width = this.input.scrollWidth + "px";
		this.input.selectionStart = Math.max(1, Math.min(this.input.selectionStart, this.input.value.length - 1));
		this.input.selectionEnd = Math.max(1, Math.min(this.input.selectionEnd, this.input.value.length - 1));
	}
	
	contextMenuHandler(event) {
		if(event.target.nodeName === "SPAN") {
			if(confirm("Remove tag?")) {
				event.preventDefault();
				this.label.removeChild(event.target);
			}
		}
	}

	static createTag(tag) {
		const element = document.createElement("span");
		element.textContent = tag;
		return element;
	}

	get tags() {
		return Array.from(this.label.querySelectorAll("span")).map(element => element.textContent);
	}
}

customElements.define("tags-field", TagsField);

// Поле для тегов создаётся программно следующим образом:
let tagField = document.createElement("tags-field");
document.body.append(tagField);

</script>