Get the cursor position inside ion-textarea

I’m trying to build a basic Rich Text Editor with Ionic, and to do so, I need a way to get the current position of the user’s cursor in the text box. This is for the purpose of bolding text inline. However, I cannot find any property that would let me do this. Does anyone have an idea as to how to do this? Maybe I need to use something other than ion-textarea.

HII I have done this in my project
one .html site you have to use Reference Variables (#input)

here is html code

 <ion-textarea rows="2" #input>

on ts side inport viewchild its used to bind element attribute

import {ViewChild} from '@angular/core';
export class Page {
  @ViewChild('input') myInput ;

Thanks for your reply! I’m still confused, however on how I can get the node’s selection. So, in pure JS, I could use the textarea object’s selectionStart function, and this would return the cursor position in the text field. Is there a way to expand on what you have to do this?

send me your .html and .ts file

I am having the same issue, please post the solution to this. I want to get the selectionStart from an ion-textarea when a button is clicked.

Joel Stevick

Try the code below
for Ionic React
// checked with ionInput. IonTextArea could have similar logic

const handle_onKeyUp = (event: React.KeyboardEvent<HTMLIonInputElement>) => {

        event.currentTarget.getInputElement().then(el => console.log(el.selectionStart))

        event.currentTarget.getInputElement().then(el => console.log(el.selectionEnd)


// in the location where ionInput is used

<IonInput onKeyUp={e => handle_onKeyUp(e)} ></IonInput>