Собственное поле для ввода на чистом JavaScript?

Question

[[a] user]

Здравствуйте. Как сделать Собственное поле для ввода на чистом JavaScript? Я знаю про HTML-тег "input" и HTML-атрибут "contenteditable". Мне нужно собственное поле для ввода, так как я хочу добавить элемент при клике на него.

Начальный код -

export const CustomInput = () => {
  customElements.define("custom-input", class extends HTMLElement {
    connectedCallback() {
      this.attachShadow({mode: "open"});
      this.innerHTML = 
       `
         <link rel="stylesheet" href="components/CustomInput/css/CustomInput.css">
         <link rel="stylesheet" href="components/Cursors/CursorText/css/CursorText.css">
         <span class="CustomInputPlaceHolder">Добавьте задачу</span>
         <script type="module" src="components/Cursors/CursorText/js/CursorText.js"></script>
       `;
       const CursorText = document.createElement("cursor-text");
       this.addEventListener("keydown", (Event) => {
       });
    };
  });
}

Comments

[Егор Живагин]

Почему не сделать обычный инпут и не обработать на него клик (keydown, input, change, ... любое событие)? И в обработчике добавлять элемент

А так не очень понятно, что именно у вас не получается и в чём вам надо помочь

[[a] user]

Егор Живагин, я создаю собственное поле для ввода, чтобы изменить курсор на другой. И для этого курсора сделать разные анимации

[rPman]

чтобы изменить курсор на другой

попробуй определять текущее положение курсора и подсовывать на это место свою картинку.

Answer 1

[rPman]

Первый же запрос в гугл выдал
Очевидно свой input потребует закодировать огромное количество ситуаций, выделение в т.ч. по дабл- и трипл-клику, вставка через буфер, работу с правосторонними шрифтами и вообще мультиязычная поддержка это ад (невидимые символы, меняющие поведение)