How to force browser to paste url and not page title in Edge

Question

I need users to copy-paste urls from external sites in a editable div of my web page ("contentEditable="true")

In Edge, when the user pastes the url, it automatically pastes the page title instead of the url.

I would like to force the browser to paste the url and not the page title. How can I do that ?

Thanks a lot

.editablediv {
  height: 50px;
  width: 300px;
  background-color: lightgray;
  padding: 3px 3px 3px 3px;
}

<div contentEditable="true" class="editablediv">https://</div>

Hi, may I know if there's any update about the issue? Does my answer below helpful to deal with the issue? — Yu Zhou, May 21 '21 at 01:47

score 1 · Accepted Answer · answered May 18 '21 at 02:09

It pastes the title in Edge because there's a copy&paste setting in Edge. You can see that by default in Edge, it will paste link instead of plain text:

If you want to force it to paste url (plain text), you can use the code like below. It will catch paste events and allow you to get the clipboard data directly as text:

document.querySelector("div[contenteditable]").addEventListener("paste", function(e) {
  e.preventDefault();
  var text = e.clipboardData.getData("text/plain");
  document.execCommand("insertHTML", false, text);
});

.editablediv {
  height: 50px;
  width: 300px;
  background-color: lightgray;
  padding: 3px 3px 3px 3px;
}

<div contentEditable="true" class="editablediv">https://</div>

How to force browser to paste url and not page title in Edge

1 Answers1