Access the copied text/File/Content

Question

How do I get the content which is already copied from this page or other word doc or internet. On line //alert('CTRL+V Pressed'); I get this alert but NO way to get the copied content. How get I alert copied text?

import React, { useState, useEffect } from "react";
import "./App.css";

export default function App() {
  const [state, setState] = useState('');

  useEffect(() => {
    const handleKeyDown = (event) => {
      event.preventDefault();
      const code = event.which || event.keyCode;

      let charCode = String.fromCharCode(code).toLowerCase();
      if ((event.ctrlKey || event.metaKey) && charCode === 's') {
        setState('CTRL+S');
        alert('CTRL+S Pressed');
      } else if ((event.ctrlKey || event.metaKey) && charCode === 'c') {
        setState('CTRL+C');
        alert('CTRL+C Pressed');
      } else if ((event.ctrlKey || event.metaKey) && charCode === 'v') {
        setState('CTRL+V');
        alert('CTRL+V Pressed');
      }
    };

    window.addEventListener('keydown', handleKeyDown);

    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

  return (
    <div>
      <h1>React JS Detect Save, Copy Keyboard Shortcuts</h1>
      <input type="text" />
      <hr/>
      <textarea />
      <hr/>
      <button>button</button>
    </div>
  );
}

Answer 1

You can have a look at the Clipboard API for managing clipboard-related features in a web app: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard

It is fairly well supported by browsers: https://caniuse.com/?search=clipboard

However going back to your actual question How do I get the content which is already copied from this page or other word doc or internet?: you are NOT able to access the raw clipboard data/history of things that a user has copied outside of your application, such as from a local file on their machine. No popular browser supports this.

The inability to access already saved items on the clipboard is primarily a security and privacy concern. Allowing web apps to access the entire clipboard history, including content copied from other applications, could lead to serious privacy violations and security risks. For example, if the user has copied a password or other sensitive information.

Your application can get access to the clipboard data if the user willingly pastes it into some field on your app.