Styjun

Was the Lonely Mountain, where Smaug lived, a volcano?

How do I say what something is made out of?

Are athletes' college degrees discounted by employers and graduate school admissions?

How can I find out about the game world without meta-influencing it?

Background for black and white chart

Is it possible to have battery technology that can't be duplicated?

How can this shape perfectly cover a cube?

What is the context for Napoleon's quote "[the Austrians] did not know the value of five minutes"?

Should I worry about having my credit pulled multiple times while car shopping?

How to avoid offending original culture when making conculture inspired from original

Converting 3x7 to a 1x7. Is it possible with only existing parts?

Is my ethereum solidity contract correct and safe

Jam with honey & without pectin has a saucy consistency always

Must a CPU have a GPU if the motherboard provides a display port (when there isn't any separate video card)?

Is fission/fusion to iron the most efficient way to convert mass to energy?

Is it possible to install Firefox on Ubuntu with no desktop enviroment?

ISP is not hashing the password I log in with online. Should I take any action?

At zero velocity, is this object neither speeding up nor slowing down?

How to know whether to write accidentals as sharps or flats?

Does PC weight have a mechanical effect?

Why not make one big cpu core?

What is the difference between state-based effects and effects on the stack?

How long would it take for sucrose to undergo hydrolysis in boiling water?

Is there a term for someone whose preferred policies are a mix of Left and Right?

Insert text at cursor position in React

insert at cursor in reactLoop inside React JSXShow or hide element in ReactReactJS - Does render get called any time “setState” is called?React-router urls don't work when refreshing or writing manuallyHow to preserve cursor position on textarea text change?Can you force a React component to rerender without calling setState?Programmatically navigate using react routerGet cursor position in a sibling componentChange the cursor position in a textarea with React

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I have a textarea that I would like to insert text into at the cursor position when a user clicks a button. Does anyone know how to go about that?

reactjs

share|improve this question

asked Mar 25 at 2:30

Dev01Dev01

6,010125293

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  When you click a button you move the focused element so there is no cursor in the text anymore. So you would have to track the last location of the cursor and then just set the value of the text area to be the current value + the extra text at the location of the last know cursor position.
  
  – Qwertie
  Mar 25 at 2:55
  

  
  
  
  

add a comment | 

0

I have a textarea that I would like to insert text into at the cursor position when a user clicks a button. Does anyone know how to go about that?

reactjs

share|improve this question

asked Mar 25 at 2:30

Dev01Dev01

6,010125293

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  When you click a button you move the focused element so there is no cursor in the text anymore. So you would have to track the last location of the cursor and then just set the value of the text area to be the current value + the extra text at the location of the last know cursor position.
  
  – Qwertie
  Mar 25 at 2:55
  

  
  
  
  

add a comment | 

I have a textarea that I would like to insert text into at the cursor position when a user clicks a button. Does anyone know how to go about that?

reactjs

share|improve this question

asked Mar 25 at 2:30

Dev01Dev01

6,010125293

share|improve this question

asked Mar 25 at 2:30

Dev01Dev01

6,010125293

share|improve this question

asked Mar 25 at 2:30

Dev01Dev01

6,010125293

asked Mar 25 at 2:30

Dev01Dev01

6,010125293

asked Mar 25 at 2:30

Dev01Dev01

6,010125293

1 Answer
1

active

oldest

votes

0

Qwertie is of course right.
Anyway, if you want to insert a given string into a textarea at the cursor position
you could use a function like this:

 insertMyText = e => 
 let textToInsert = " this is the inserted text "
 let cursorPosition = e.target.selectionStart
 let textBeforeCursorPosition = e.target.value.substring(0, cursorPosition)
 let textAfterCursorPosition = e.target.value.substring(cursorPosition, e.target.value.length)
 e.target.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition
 

and:

<textarea onClick=this.insertMyText>bla bla bla bla</textarea>

share|improve this answer

answered Mar 25 at 9:44

flxflx

1287

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55330555%2finsert-text-at-cursor-position-in-react%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Qwertie is of course right.
Anyway, if you want to insert a given string into a textarea at the cursor position
you could use a function like this:

 insertMyText = e => 
 let textToInsert = " this is the inserted text "
 let cursorPosition = e.target.selectionStart
 let textBeforeCursorPosition = e.target.value.substring(0, cursorPosition)
 let textAfterCursorPosition = e.target.value.substring(cursorPosition, e.target.value.length)
 e.target.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition
 

and:

<textarea onClick=this.insertMyText>bla bla bla bla</textarea>

share|improve this answer

answered Mar 25 at 9:44

flxflx

1287

add a comment | 

0

Qwertie is of course right.
Anyway, if you want to insert a given string into a textarea at the cursor position
you could use a function like this:

 insertMyText = e => 
 let textToInsert = " this is the inserted text "
 let cursorPosition = e.target.selectionStart
 let textBeforeCursorPosition = e.target.value.substring(0, cursorPosition)
 let textAfterCursorPosition = e.target.value.substring(cursorPosition, e.target.value.length)
 e.target.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition
 

and:

<textarea onClick=this.insertMyText>bla bla bla bla</textarea>

share|improve this answer

answered Mar 25 at 9:44

flxflx

1287

add a comment | 

Qwertie is of course right.
Anyway, if you want to insert a given string into a textarea at the cursor position
you could use a function like this:

 insertMyText = e => 
 let textToInsert = " this is the inserted text "
 let cursorPosition = e.target.selectionStart
 let textBeforeCursorPosition = e.target.value.substring(0, cursorPosition)
 let textAfterCursorPosition = e.target.value.substring(cursorPosition, e.target.value.length)
 e.target.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition
 

and:

<textarea onClick=this.insertMyText>bla bla bla bla</textarea>

share|improve this answer

answered Mar 25 at 9:44

flxflx

1287

 insertMyText = e => 
 let textToInsert = " this is the inserted text "
 let cursorPosition = e.target.selectionStart
 let textBeforeCursorPosition = e.target.value.substring(0, cursorPosition)
 let textAfterCursorPosition = e.target.value.substring(cursorPosition, e.target.value.length)
 e.target.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition
 

<textarea onClick=this.insertMyText>bla bla bla bla</textarea>

share|improve this answer

answered Mar 25 at 9:44

flxflx

1287

answered Mar 25 at 9:44

flxflx

1287

answered Mar 25 at 9:44

flxflx

1287