Page hiccup to access clipboard content

I try again: to get the clipboard content I use

field = document.activeElement;
var area = document.getElementById(“fcb_txt_area”);
if (area) {
area.setAttribute(“style”, “visibility:visible;”);}
else {
area = document.createElement(“textarea”);
area.setAttribute(“id”, “fcb_txt_area”);
area.setAttribute(“cols”, “1”);
area.setAttribute(“rows”, “1”);
if (field) {
field.parentNode.append(area);
}
else {
document.body.appendChild(area);
}
area.contentEditable = true;
}
area.textContent = ‘’;
area.select();
document.execCommand(“paste”);
area.setAttribute(“style”, “visibility:hidden;”);
return area.value

Well, this works, kind of, but if the textarea is created in the bottom of the page, the browser “is moving down” possibly because of area.select. If the
document.activeElement is defined (usually a form field), this element is pushed somewhat on the left when the textarea is appended.
In Opera or Chrome, this code would run from the background and nothing would change on the page.
Any idea on how to minimize these page hiccups ?
Thanks
F.

1 Like

Why not use the the approach mentioned in the docs?

It’s the same way of doing things: To read the clipboard you need to have a text area in the doc to paste the clipboard’s content into. I create this text area the first time the extension is used, and this is visible to the user even if the text area is hidden as soon as possible.

I would use display: none instead of visibility: hidden. The former prevents the element from affecting layout altogether.

Excellent No more hiccups. Thanks.