Мобильная версияВставить в div, не принимая ввод текста ⇐ CSS
-
Anonymous
Вставить в div, не принимая ввод текста
Мой вопрос в некотором смысле похож на этот пост, этот пост кажется очень ограниченным по сравнению с тем, что я хочу сделать. Я обдумываю идею создания элемента div, который имитирует редактируемый контент, но лучше. Пользователь сможет добавлять текст в различных форматах, стилях, шрифтах и т. д. Даже включая изображения, видео и т. д. Это не более чем идея (поэтому не судите слишком строго по ее практичности).
Короче говоря, у меня есть div, который выглядит вот так
  это есть в javascript
let Canvas = document.getElementById("canvas"); let курсор = document.getElementById("canvas-cursor"); Canvas.addEventListener("keydown", editText); const RemoveAttributes = (элемент) => { for (пусть я = 0; я < element.attributes.length; i++) { element.removeAttribute(element.attributes.name); } }; функция editText(событие) { событие.preventDefault; const keyName = event.key; if (keyName === "Control") { console.log(`Клавиша управления ${keyName}`); возвращаться; } если (event.ctrlKey) { console.log(`Комбинация ctrlKey ${keyName}`); } еще { let newElement = document.createElement("span"); newElement.setAttribute("класс", "canvas-child"); переключатель (keyName){ случай " ": newElement.innerHTML = " "; перерыв; случай «Стрелка влево»: возвращаться; случай «СтрелкаВправо»: возвращаться; кейс «Backspace»: вар удален = холст.removeChild(cursor.previousElementSibling); RemoveAttributes (удалено); возвращаться; случай «СтрелкаВверх»: возвращаться; случай «Стрелка вниз»: возвращаться случай «Ввод»: newElement.innerText += "\n" перерыв; случай «Смена»: случай «Альт»: console.log("Нажата кнопка Alt."); корпус «Таб»: корпус «Мета»: регистр «CapsLock»: возвращаться; по умолчанию: newElement.innerText += имя_ключа перерыв; } newElement.addEventListener("mouseenter", (event)=> { // newElement.style.background = "зеленый"; }); newElement.addEventListener("mouseleave", (event)=> { newElement.style.background = "нет"; }); newElement.addEventListener("dblclick", (event) => { console.log("Событие при нажатии: " + событие + "\nsource: " + newElement); Canvas.insertBefore(курсор, новыйЭлемент); }); Canvas.insertBefore(newElement, курсор); } } и CSS
#canvas-cursor { цвет фона: красный; анимация: мигалка 1с линейная бесконечная; } Текстовая навигация, стиль/форматирование шрифта были удалены для простоты, но это работает нормально; пользователь может выбрать стиль кода, подчеркивание, жирный шрифт, стиль шрифта, выделение и т. д.
Следующие два события, о которых я хочу поговорить, — это копирование и вставка. Я знаю, что могу легко включить эту функцию, если добавлю атрибут contenteditable="true", однако при этом также потребуется ввод с клавиатуры и заполнение div текстом; это означает, что все, что набирает пользователь, будет повторяться; я не хочу этого, так как я уже об этом позаботился. Мне нужно только захватить событие вставки и обработать его по своему усмотрению. Есть ли способ сделать это?
Заранее спасибо.
Мой вопрос в некотором смысле похож на этот пост, этот пост кажется очень ограниченным по сравнению с тем, что я хочу сделать. Я обдумываю идею создания элемента div, который имитирует редактируемый контент, но лучше. Пользователь сможет добавлять текст в различных форматах, стилях, шрифтах и т. д. Даже включая изображения, видео и т. д. Это не более чем идея (поэтому не судите слишком строго по ее практичности).
Короче говоря, у меня есть div, который выглядит вот так
  это есть в javascript
let Canvas = document.getElementById("canvas"); let курсор = document.getElementById("canvas-cursor"); Canvas.addEventListener("keydown", editText); const RemoveAttributes = (элемент) => { for (пусть я = 0; я < element.attributes.length; i++) { element.removeAttribute(element.attributes.name); } }; функция editText(событие) { событие.preventDefault; const keyName = event.key; if (keyName === "Control") { console.log(`Клавиша управления ${keyName}`); возвращаться; } если (event.ctrlKey) { console.log(`Комбинация ctrlKey ${keyName}`); } еще { let newElement = document.createElement("span"); newElement.setAttribute("класс", "canvas-child"); переключатель (keyName){ случай " ": newElement.innerHTML = " "; перерыв; случай «Стрелка влево»: возвращаться; случай «СтрелкаВправо»: возвращаться; кейс «Backspace»: вар удален = холст.removeChild(cursor.previousElementSibling); RemoveAttributes (удалено); возвращаться; случай «СтрелкаВверх»: возвращаться; случай «Стрелка вниз»: возвращаться случай «Ввод»: newElement.innerText += "\n" перерыв; случай «Смена»: случай «Альт»: console.log("Нажата кнопка Alt."); корпус «Таб»: корпус «Мета»: регистр «CapsLock»: возвращаться; по умолчанию: newElement.innerText += имя_ключа перерыв; } newElement.addEventListener("mouseenter", (event)=> { // newElement.style.background = "зеленый"; }); newElement.addEventListener("mouseleave", (event)=> { newElement.style.background = "нет"; }); newElement.addEventListener("dblclick", (event) => { console.log("Событие при нажатии: " + событие + "\nsource: " + newElement); Canvas.insertBefore(курсор, новыйЭлемент); }); Canvas.insertBefore(newElement, курсор); } } и CSS
#canvas-cursor { цвет фона: красный; анимация: мигалка 1с линейная бесконечная; } Текстовая навигация, стиль/форматирование шрифта были удалены для простоты, но это работает нормально; пользователь может выбрать стиль кода, подчеркивание, жирный шрифт, стиль шрифта, выделение и т. д.
Следующие два события, о которых я хочу поговорить, — это копирование и вставка. Я знаю, что могу легко включить эту функцию, если добавлю атрибут contenteditable="true", однако при этом также потребуется ввод с клавиатуры и заполнение div текстом; это означает, что все, что набирает пользователь, будет повторяться; я не хочу этого, так как я уже об этом позаботился. Мне нужно только захватить событие вставки и обработать его по своему усмотрению. Есть ли способ сделать это?
Заранее спасибо.
