Contenteditable div and caret/cursor position on iOS

Hi, I’ve been wrestling with this for a few hours now and finally decided to seek help.

I’m working on an app that is using a contenteditable=true DIV effectively as a ‘textarea’ so that I can allow my users to insert an image (via a button on a toolbar) within the body of what they type within the DIV. I’m using some javascript to detect the caret position within the DIV so that I can figure out where to insert the image element(s) however on iOS i’m not able to get the caret position once the keyboard closes and the div loses focus. I’ve tried hooking into the blur and focusout events in my div but i’ve not been able to get that to work.

Has anyone successfully used a contenteditable DIV and found a way to allow the user to insert text/html at the position of the cursor? All I need to do I believe is be able to figure out the caret/cursor position at the point the user presses the ‘insert picture’ button but clicking the button is taking focus away from the div and I’m losing the ability to figure out where the caret was.

If you want to see a similar functionality, you can just look at how gmail on iOS does it… Wherever you leave the cursor when you press the ‘paperclip’ is where the image is inserted.

I would very much appreciate any pointers or suggestions.

I’m working in ionic3 and the latest versions of all relevant components.

Thanks very much,

1 Like


I’m working on something very similar, and have the same issue on iOS. Did you manage to find a solution for this?