Inserting Text at Cursor Position in the TextArea

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® TextArea for Angular

Description

I have a Kendo UI for Angular TextArea in my project and a context menu attached to the TextArea. When the user selects an entry from the context menu, I want to insert the selected value at the current cursor position in the TextArea.

This Knowledge Base article also answers the following questions:

• How can I insert text at the current cursor position in the TextArea?
• What is the method to detect the cursor position within the TextArea?
• How do I use a context menu to insert text at a specific position in the TextArea?

Solution

To insert text at the cursor position inside the Kendo UI for Angular TextArea:

1. Declare the TextArea and a Kendo UI for Angular ContextMenu in the template of your component:

   html

   <kendo-textarea ...></kendo-textarea>
   
   <kendo-contextmenu #cmenu ...></kendo-contextmenu>

2. Handle the generic contextmenu event of the TextArea component and prevent its default behavior.

   html

   <kendo-textarea #textarea
       ...
       (contextmenu)="openContextMenu($event)"
   ></kendo-textarea>

   ts

   public openContextMenu(e) {
       e.preventDefault();
   
       ...
   }

3. Use the contextmenu event handler to obtain and store the current cursor position and programmatically display the ContextMenu.

   ts

   public openContextMenu(e) {
       ...
   
       const textareaElement: HTMLTextAreaElement =
         document.querySelector('.k-input-inner');
   
       const startPos = textareaElement.selectionStart;
       const endPos = textareaElement.selectionEnd;
   
       if (startPos === endPos) {
         this.cursorPosition = startPos;
       }
   
       this.contextMenu.show({
         left: e.pageX,
         top: e.pageY,
       });
   }

4. Handle the select event of the ContextMenu and insert the desired text at the cursor position by updating the value bound to the TextArea:

   ts

   public onSelect(ev) {
       const item = ev.item.text;
   
       this.value =
         this.value.substring(0, this.cursorPosition) +
         item +
         this.value.substring(this.cursorPosition);
   }

The following example demonstrates the suggested approach in action.

Change Theme

Theme

Loading ...

See Also

• TextArea Overview
• ContextMenu Overview
• API Reference of the TextArea Component
• API Reference of the ContextMenu Component
• SelectionStart Property of the Native Input/TextArea Element