Send selected text to another div in ReactJS using onSelect event?

Question

I have a two div I want to send selected text to another div using onSelect event. Right now entire para sending to another div but I want to send just selected text. How can I do this?

Demo: https://codesandbox.io/s/selected-text-send-to-another-div-using-onselect-0ccnrn?file=/src/App.js

My code:

import React from "react";
import { Box, Grid, TextField, Typography } from "@material-ui/core";
import { useState } from "react";

const SendSelectedText = () => {
    const [label1, setlabel1]=useState('');
    const [para, setPara]=useState('This is Old Para');
   const handleClick = () => {
    setlabel1(para);
  };
  return (
    <>
      <Box className="sendSelectedTextPage">
        <Grid container spacing={3}>
          <Grid item xl={6} lg={6} md={6}>
            <textarea onSelect={handleClick}>{para}</textarea>
          </Grid>
          <Grid item xl={6} lg={6} md={6}>
            <TextField
              variant="outlined"
              size="small"
              label="Label One"
              value={label1}
              multiline
              rows={3}
              className="sendSelectedTextPageInput"
            />
          </Grid>
        </Grid>
      </Box>
    </>
  );
};

export default SendSelectedText;

Nixit Ahir · Accepted Answer · 2022-10-20 15:58:05Z

All you need is use window.getSelection(). Here is solution

import React from "react";
import { Box, Grid, TextField, Typography } from "@material-ui/core";
import { useState } from "react";

const SendSelectedText = () => {
  const [label1, setlabel1] = useState("");
  const [para, setPara] = useState("This is Old Para");
  const handleMouseUp = () => {
    setlabel1(window.getSelection().toString()); // setting up label1 value 
  };
  return (
    <>
      <Box className="sendSelectedTextPage">
        <Grid container spacing={3}>
          <Grid item xl={6} lg={6} md={6}>
            // changed event to onMouseUp 
            <textarea onMouseUp={handleMouseUp}>{para}</textarea>
          </Grid>
          <Grid item xl={6} lg={6} md={6}>
            <TextField
              variant="outlined"
              size="small"
              label="Label One"
              value={label1}
              multiline
              rows={3}
              className="sendSelectedTextPageInput"
            />
          </Grid>
        </Grid>
      </Box>
    </>
  );
};

export default SendSelectedText;

Sandboxlink

Konrad · Accepted Answer · 2022-10-20 15:41:24Z

2

You have to use the selection

const handleClick = (e) => {
  setlabel1(
    e.target.value.substring(e.target.selectionStart, e.target.selectionEnd)
  );
};

or

const handleClick = (e) => {
  setlabel1(
    para.substring(e.target.selectionStart, e.target.selectionEnd)
  );
};

Based on this

sandbox

answered Oct 20, 2022 at 15:41

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Collectives™ on Stack Overflow

Send selected text to another div in ReactJS using onSelect event?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related