最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React js paste a previously copied text by clicking on a button - Stack Overflow

programmeradmin4浏览0评论

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>
  );
}
Share Improve this question asked Sep 30, 2021 at 13:18 PaulPaul 4,48615 gold badges66 silver badges153 bronze badges 4
  • 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
Add a ment  | 

1 Answer 1

Reset to default 7

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.

发布评论

评论列表(0)

  1. 暂无评论