How to type text at the caret position using javascript?

Question

I am making a special character menu for an input. when they click on an options menu, the app must paste the special character at the placement of the caret(the mouse cursor).

It also seems to reset the caret's position at the end of the text box whenever the code edits the input with document.getElementById("id").value, any way to fix that?

Sorry if this was asked before, i did a bunch of research and did not find anything.

Answer 1

First of all you need to store the caret position so that even when the input doesn't have focus you know it's last position. You can do this by listening to a range of events that may mean the caret position has changed.

Then when the user clicks the button to add a special character, you can place the special character at the caret position you stored. You can also return focus, setting the caret back to it's last position.

I've found a great example of how to keep track of the caret position: Cursor Position Control Example

Hopefully this will get you going in the right direction.