In Safari Clipboard.WriteText() does not work in a button on_click callback

[gdworkman]

Hello,

I am attempting to create a button that copies some text to the user's clipboard. I have included a simplified version of the relevant code below:

put_scope("example_scope")
with use_scope("example_scope):
    put_button('Copy', onclick=example_copy_callback)

def example_copy_callback() -> None:
    text_to_copy = "Hello World"
    run_js("""navigator.clipboard.writeText(out).then(
        () => {
            console.log('Content copied to clipboard');
        }, (err) => {
            console.error('Failed to copy: ', err);
        });""", out = text_to_copy
    )

This is working in both Chrome and Firefox, however with Safari I am getting the following error:
Failed to copy: – NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

I believe this has something to do with the fact that in Safari, clipboard.writeText() must be called within user gesture event handlers such as pointerdown or pointerup (source). Unfortunately, I am a noob when it comes to javascript and web development, and I am not clear on how this detail would interact with the underlying onclick callback and run_js() method of PyWebIO.

Any insight into why this is failing or viable workarounds would be greatly appreciated!

[wang0618]

I failed to set clipboard via clipboard.writeText() in pywebio with chrome.

However, I use a more compatible code to set clipboard in the pywebio's demo in document (like this).

CLIPBOARD_SETUP = """
window.writeText = function(text) {
    const input = document.createElement('textarea');
    input.style.opacity  = 0;
    input.style.position = 'absolute';
    input.style.left = '-100000px';
    document.body.appendChild(input);
    input.value = text;
    input.select();
    input.setSelectionRange(0, text.length);
    document.execCommand('copy');
    document.body.removeChild(input);
    return true;
}
"""
run_js(CLIPBOARD_SETUP)

put_button("Set clioboard", lambda: run_js("writeText(text)", text="Some text"))

You can try the code in here: https://s.pywebio.online/f24f31757b10a0e74b9b874c9588fc78

[gdworkman]

Thank you for this example.

I considered using a similar approach but was hesitant because document.execCommand is deprecated and no longer recommended. It looks like all major browsers still support it for backwards compatibility, so maybe this is an appropriate workaround for the time being.

[gdworkman]

Unfortunately the provided example does not work in Safari (tested in Safari version 16.3).

[liangyining]

I failed to set clipboard via clipboard.writeText() in pywebio with chrome.

However, I use a more compatible code to set clipboard in the pywebio's demo in document (like this).

CLIPBOARD_SETUP = """
window.writeText = function(text) {
const input = document.createElement('textarea');
input.style.opacity = 0;
input.style.position = 'absolute';
input.style.left = '-100000px';
document.body.appendChild(input);
input.value = text;
input.select();
input.setSelectionRange(0, text.length);
document.execCommand('copy');
document.body.removeChild(input);
return true;
}
"""
run_js(CLIPBOARD_SETUP)

put_button("Set clioboard", lambda: run_js("writeText(text)", text="Some text"))
You can try the code in here: https://s.pywebio.online/f24f31757b10a0e74b9b874c9588fc78

貌似我在popup弹窗中操作复制不会生效，以下是代码，希望作者指引，非常感谢

`
def show_popup(title, valuelist):
CLIPBOARD_SETUP = """
window.writeText = function(text) {
const input = document.createElement('textarea');
input.style.opacity = 0;
input.style.position = 'absolute';
input.style.left = '-100000px';
document.body.appendChild(input);
input.value = text;
input.select();
input.setSelectionRange(0, text.length);
document.execCommand('copy');
document.body.removeChild(input);
console.log(text);
return true;
}
"""
run_js(CLIPBOARD_SETUP)
"""显示弹出窗口"""
if not valuelist:
pass
else:
with popup(title, size=PopupSize.LARGE, implicit_close=False):
put_scope('aaa'),
put_table([[index, put_html(f'

{v}

'), put_button("Set clioboard", lambda x=v: run_js("writeText(text)", text=f"{x}"))]
for index,
v in enumerate(valuelist, 1)], ['序号', '节点名称', '操作'],scope='aaa').style(
"user-select: text; -webkit-user-select: text; "
"-moz-user-select: text; -ms-user-select: "
"text;")

`