Add value to textbox where user is standing

Question

I want to add vowels to chars in a textbox. I created inputs and a function which adds the value of the vowel into the textbox:

<textarea dir="rtl" id="text" runat="server" name="text" rows="5" cols="30""></textarea> <br />
<input type="button" style="height:28px;width:42px;" id="Dagesh" value="דגש" onclick="AddNikud(&#39;ּ&#39;)"/>

<script>
function AddNikud(nikud) {
   document.getElementById('text').value += nikud; 
   document.getElementById('text').focus();
}
</script>

The thing is - the function adds the vowel into the last char in the textbox. I want the vowel to be entered after where the keyboard cursor of the user is standing.

For example:

textbox: Hello wo(User is here)rld!

The vowel value should be from the right of the 'o'.

Thanks in advance!

Answer 1

To get the position of the carret we have the property selectionStart.

const textarea = document.getElementById('text');
textarea.value = textarea.value.substring(0, textarea.selectionStart) + nikud + textarea.value.substring(textarea.selectionStart, textarea.value.length);
textarea.focus();