Вставляемый div: вставка исчезает в контекстном меню, работает только по Ctrl + V

Question

У меня есть HTML-div, который я делаю для вставляемой области следующим образом:

$('#' + pasteZoneId).bind("paste", (e)=> {

Все работает хорошо, когда пользователь нажимает Ctrl + V, событие запускается.Проблема в том, что когда пользователь щелкает правой кнопкой мыши для вставки по контекстному меню - опция вставки исчезает в контекстном меню.

Что мне делать?

---

ОБНОВЛЕНИЕ:

больше подробностей: я не имею в виду, что пользователь может вставлять вещи в div, такие как текст и т. Д. Div не является действительно вставляемым;Я улавливаю событие вставки, а затем получаю логическую схему y и позволяю вставлять только изображения. I взять изображение, I присоединить его к div с помощью Jquery;а не браузер.

Теперь вопрос только в том, как я могу заставить контекстное меню отображать опцию «вставка», так как когда пользователь нажимает Ctrl + V, он работает хорошо, событие запускается, и изображение прикрепляетсяпо моему коду, поэтому я хочу позволить пользователю нажать вставить вместо нажать вставить.

Answer 1

Bind and Unbind ограничен. Пожалуйста, используйте на

Попробуйте это

var pasteZoneId="pasteZoneId";
$("#" + pasteZoneId).on("paste", (e)=> {
    alert("Pasting...");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="pasteZoneId">

</textarea>

Вы также можете использовать это с div следующим образом

var pasteZoneId="pasteZoneId";
$("#" + pasteZoneId).on("paste", (e)=> {
    alert("Pasting...");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pasteZoneId" contenteditable style="border:1px solid #000">

</div>

Answer 2

Хотя каждый элемент может получить событие paste , это событие всегда будет игнорироваться (как при отсутствии поведения по умолчанию), за исключением случаев, когда элементом является либо <input>, <textarea>, либорежим contentEditable .

Так что, хотя в их контекстном меню нет никаких указаний относительно того, что браузер должен показывать, фактом является то, что большинство из них не показывают «Вставить» там, где оно будетвсе равно проигнорируйте.

Таким образом, чтобы получить его на <div>, вам нужно установить атрибут contentEditable в значение true.

Если вы не хотите его всегда,Вы можете взломать что-нибудь в событии mousedown :

target.onmousedown = e => {
  if (e.button === 2) target.contentEditable = true;
  // wait just enough for 'contextmenu' to fire
  setTimeout(() => target.contentEditable = false, 20);
};

target.onpaste = e => {
  e.preventDefault();
  console.log('got paste data:', e.clipboardData.getData('text'));
};

<div id="target">right click me</div>

Answer 3

Не используйте bind, но создайте прослушиватель событий :

$("#" + pasteZoneId).on("paste", (e)=> {
    //Function here
});