Собственное поле для ввода на чистом JavaScript?
Здравствуйте. Как сделать Собственное поле для ввода на чистом 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) => { }); }; }); } |
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) => { }); }; }); }
Дополнительно:
Почему не сделать обычный инпут и не обработать на него клик (keydown, input, change, ... любое событие)? И в обработчике добавлять элемент
А так не очень понятно, что именно у вас не получается и в чём вам надо помочь
чтобы изменить курсор на другой
попробуй определять текущее положение курсора и подсовывать на это место свою картинку.
Первый же запрос в гугл выдал
Очевидно свой input потребует закодировать огромное количество ситуаций, выделение в т.ч. по дабл- и трипл-клику, вставка через буфер, работу с правосторонними шрифтами и вообще мультиязычная поддержка это ад (невидимые символы, меняющие поведение)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания собственного поля ввода на чистом JavaScript, вам необходимо создать элемент с помощью метода createElement и добавить его на страницу. Затем вы можете добавить обработчики событий для отслеживания ввода пользователя и выполнения необходимых действий.
Пример реализации собственного поля ввода на JavaScript:
// Создаем элемент input var inputField = document.createElement('input'); inputField.setAttribute('type', 'text'); inputField.setAttribute('id', 'customInput'); // Добавляем элемент на страницу document.body.appendChild(inputField); // Добавляем обработчик события для отслеживания ввода inputField.addEventListener('input', function() { var value = inputField.value; console.log('Пользователь ввел: ' + value); });
В этом примере мы создаем поле ввода типа текст и добавляем его на страницу. Затем мы добавляем обработчик события input, который будет отслеживать каждое изменение в поле ввода и выводить значение в консоль.
Вы также можете добавить другие обработчики событий, такие как keydown или blur, чтобы реагировать на различные действия пользователя. Например, можно добавить проверку на ввод только определенных символов или выполнение определенного действия при потере фокуса с поля ввода.
Таким образом, с помощью простого JavaScript можно легко создать собственное поле ввода и настроить его поведение в соответствии с вашими потребностями.