CODEWITHSUNDEEP
javascripthtmlbrowsercontextmenucopy-paste
user5260143
user5260143

Reputation: 1098

Pasteable div: paste disappear in context-menu, work only by ctrl+V

I have HTML div which I make it pasteable-area by the following:

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

All work well when user press ctrl+v, the event is fired. The problem is that when user right-click for paste by context menu - paste option disappear in the context-menu.

What should I do?

UPDATE:

more details: I don't mean that user can paste things in the div, like text, etc. The div is not really pasteable; I catch the paste event and then have ,y logic, and let paste only images. I take the image, I attach it to the div by Jquery; not the browser.

Now the question in only how can I cause the context menu to display the 'paste' option, as when user press ctrl+V it works well, the event is fired and the image is attached by my code, so I only want to let user click paste instead of press paste.

Upvotes: 2

Views: 1761

Answers (3)

Kaiido
Kaiido

Reputation: 136707

While every Element can receive a paste Event, this Event will always get ignored (as in no default behavior), except if the Element is either an <input>, a <textarea>, or in a contentEditable mode.

So while there is no specs about what a browser should show in their context-menu, it's a fact that most of them do not show "Paste" where it will get ignored anyway.

So to get it on your <div>, you'd have to have its contentEditable attribute set to true.

If you don't want it always, you can hack something in the mousedown event:

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>

Upvotes: 2

Sourabh Somani
Sourabh Somani

Reputation: 2138

Bind and Unbind is depricated Please use on

Try this

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>

You can also use this with div like as follows

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>

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44107

Don't use bind, but make an event listener:

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

Upvotes: 0

Related Questions