I have a long enough text that is copied from another site, I have to make sure that when the user clicks on the button, the text is taken and copied into the value variable.

I tried using getData, but it doesn't work.

Can you give me a hand?

Link: codesandbox

Code:

import React, { useState, useEffect, useRef } from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

export default function MultilineTextFields() {
  const [value, setValue] = React.useState("");

  const ref = useRef(null);

  return (
    <Box
      ponent="form"
      sx={{
        "& .MuiTextField-root": { m: 1, width: "25ch" }
      }}
      noValidate
      autoComplete="off"
    >
      <Button
        variant="contained"
        color="primary"
        onClick={(e) => {
          let paste = (e.clipboardData || window.clipboardData).getData("Text");
          setValue(paste);
        }}
      >
        Paste
      </Button>

      <div>
        <TextField
          ref={ref}
          id="outlined-multiline-static"
          label="Multiline"
          multiline
          rows={40}
          value={value}
        />
      </div>
    </Box>
  );
}

I have a long enough text that is copied from another site, I have to make sure that when the user clicks on the button, the text is taken and copied into the value variable.

I tried using getData, but it doesn't work.

Can you give me a hand?

Link: codesandbox

Code:

import React, { useState, useEffect, useRef } from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

export default function MultilineTextFields() {
  const [value, setValue] = React.useState("");

  const ref = useRef(null);

  return (
    <Box
      ponent="form"
      sx={{
        "& .MuiTextField-root": { m: 1, width: "25ch" }
      }}
      noValidate
      autoComplete="off"
    >
      <Button
        variant="contained"
        color="primary"
        onClick={(e) => {
          let paste = (e.clipboardData || window.clipboardData).getData("Text");
          setValue(paste);
        }}
      >
        Paste
      </Button>

      <div>
        <TextField
          ref={ref}
          id="outlined-multiline-static"
          label="Multiline"
          multiline
          rows={40}
          value={value}
        />
      </div>
    </Box>
  );
}

• javascript
• reactjs
• clipboard
• paste

• What exactly do you mean it is copied from another site? how is it copied from there? – mw509 Commented Sep 30, 2021 at 13:35
• @mw509: Select the text and copy. When I am on this page instead, I would simply like to click a paste button that allows me to copy (assign) the previously copied text to the value variable. – Paul Commented Sep 30, 2021 at 13:40
• so basically you want to paste whatever is in the clipboard to the textbox? that means the last copied text from anywhere really. yes? – mw509 Commented Sep 30, 2021 at 13:41
• The last text found copied to the in-memory cache. – Paul Commented Sep 30, 2021 at 13:43

1 Answer 1

It should be noted that this method is not entirely cross-platform. See Here for the patibility.

You can use the clipboard API, It can be used like this:

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

Or with async syntax:

const text = await navigator.clipboard.readText();

Keep in mind that this will prompt the user with a permission request dialog box, so no funny business is possible.

The above code will not work if called from the console. It only works when you run the code in an active tab. To run the code from your console you can set a timeout and click in the website window quickly:

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);

Read more on the API and usage in the Google developer docs.

You also probably can’t use this on code sandbox because it is a sandboxed environment.