Adding native menu on right click event is not an easy task. Tried below code, but copy and paste functionality don't work because the default dialog with copy/paste it's a native feature outside javascript reach for security reasons.

You can prevent a right click or F12 (or other keys/events) from happening by adding the code below in your index.html file:

<script>

        // Prevent F12 key
        document.onkeydown = function (e) {
            if (e.key === "F12") {
                e.preventDefault();
            }
        };

        // Prevent right-click 
        document.addEventListener("contextmenu", function (e) {
            e.preventDefault();
        });

    </script>

Here if you want to try to implement the copy/paste (I didn't managed to do it).
The thing is that the right click widget must be customizable depending on the UI.

<script>

        // Prevent right-click to show copy/paste widget instead
        
        document.addEventListener("contextmenu", function (e) {
            e.preventDefault();

            const cursorX = e.clientX;
            const cursorY = e.clientY;

            const dropdown = document.createElement('div');
            dropdown.style.position = 'absolute';
            dropdown.style.left = `${cursorX}px`;
            dropdown.style.top = `${cursorY}px`;
            dropdown.style.color = 'black';
            dropdown.style.backgroundColor = 'white';
            dropdown.style.paddingTop = '5px';
            dropdown.style.paddingBottom = '5px';
            dropdown.style.paddingLeft = '10px';
            dropdown.style.paddingRight = '10px';
            dropdown.style.cursor = 'pointer';

            // Add "Copy" item
            const copyItem = document.createElement('div');
            copyItem.textContent = 'Copy';
            dropdown.style.marginBottom = '5px';
            copyItem.addEventListener('click', async () => {
                try {
                    const textToCopy = document.selection.createRange().text;
                    alert(textToCopy)
                    await navigator.clipboard.writeText(textToCopy);
                    dropdown.remove();
                    console.log(`Text '${textToCopy}' copied to clipboard successfully.`);
                } catch (error) {
                    console.error(`Error copying to clipboard: ${error}`);
                }
            });
            dropdown.appendChild(copyItem);

            // Add "Paste" item
            const pasteItem = document.createElement('div');
            pasteItem.textContent = 'Paste';
            dropdown.style.marginBottom = '5px';
            pasteItem.addEventListener('click', async () => {
                try {
                    const clipboardText = await navigator.clipboard.readText();
                    console.log(`Pasted text: ${clipboardText}`);
                    dropdown.remove();
                } catch (error) {
                    console.error(`Error pasting from clipboard: ${error}`);
                }
            });
            dropdown.appendChild(pasteItem);

            document.body.appendChild(dropdown);
        });

    </script>

So, we can prevent the event from hapening, but we limit somehow the user (he can't do right-click copy/paste).

Prevent users from opening the browser console through shortcut keys #135

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions