# Get Cursor position in Text Area Component

**URL:** <https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 2, 2023, 5:47am UTC](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268 "2023-08-02T05:47:58Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [August 2, 2023, 5:47am UTC](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268/1 "2023-08-02T05:47:58Z")

</div>

Hi,

I try to create a simple expression editor in Perspective and I use Text Area Component so users type their expression. As I also support Wizard for adding functions, I need to know where is the location of the user cursor in the Text Area Component so I can concatenate my function in that location.  
Is there any way to find the cursor position by Javascript and Markdown component? Or any other idea?

Thanks

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 2, 2023, 8:33am UTC](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268/2 "2023-08-02T08:33:54Z")

</div>

you'll need to put a domId on your textfield

```auto
	#make the propName the key to write too in the view.custom 
	propName = "selectedIndex"
	code = """<img style='display:none' src='/favicon.ico' onload=\"
		const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; 
		const table = document.getElementById('"""+value+"""');
		function getSelected(){
							const selectedIndex = document.getElementById('"""+value+"""').selectionStart;
							view.custom.write('"""+propName+"""',selectedIndex);
						};			
		table.onclick = getSelected;
		table.onkeyup = getSelected;				
	\"></img>""".replace("\n", "").replace("\t", "")
	return code

```

> **Summary**
>
> `[{ "type": "ia.display.markdown", "version": 0, "props": { "style": { "flex": "--neutral-40" }, "markdown": { "escapeHtml": false } }, "meta": { "name": "Markdown" }, "position": { "x": 166, "y": 290, "height": 200, "width": 200 }, "custom": {}, "propConfig": { "props.source": { "binding": { "type": "expr", "config": { "expression": "{../TextArea.meta.domId}" }, "transforms": [{ "code": "\t#make the propName the key to write too in the view.custom \n\tpropName = \"selectedIndex\"\n\tcode = \"\"\"<img style='display:none' src='/favicon.ico' onload=\\\"\n\t\tconst view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; \n\t\tconst table = document.getElementById('\"\"\"+value+\"\"\"');\n\t\tfunction getSelected(){\n\t\t\t\t\t\t\tconst selectedIndex = document.getElementById('\"\"\"+value+\"\"\"').selectionStart;\n\t\t\t\t\t\t\tview.custom.write('\"\"\"+propName+\"\"\"',selectedIndex);\n\t\t\t\t\t\t};\t\t\t\n\t\ttable.onclick = getSelected;\n\t\ttable.onkeyup = getSelected;\t\t\t\t\n\t\\\"></img>\"\"\".replace(\"\\n\", \"\").replace(\"\\t\", \"\")\n\treturn code\n\t", "type": "script" } ] } } } } ]`

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 2, 2023, 8:35am UTC](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268/3 "2023-08-02T08:35:03Z")

</div>

lol marked as solved in one second, you trust me a lot, didnt even have time to test it yet 😛

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [August 2, 2023, 8:45am UTC](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268/4 "2023-08-02T08:45:53Z")

</div>

Yes you are the god of the CSS3 and JS in Perspective.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [August 2, 2023, 11:36am UTC](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268/5 "2023-08-02T11:36:59Z")

</div>

> [@victordcq](#):
>
> textfield

The code has no error but doesn't return position:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/0/60582b2f0d1c6543447a72f3f5b56c2f29b04dd5.png)  
[textArea.zip](https://forum.inductiveautomation.com/uploads/short-url/9KRmUOkYIEFJQGd1XDZp20vxHcC.zip) (24.9 KB)

May be i did something wrong, could you please take a quick look at it.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 2, 2023, 12:11pm UTC](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268/6 "2023-08-02T12:11:04Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/8/489a37b5826d8b1a157dc0a70b3ba1b18831e58e.png)  
this must be false

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 2, 2023, 12:14pm UTC](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268/7 "2023-08-02T12:14:13Z")

</div>

> [@victordcq](#):
>
> ```auto
> #make the propName the key to write too in the view.custom 
> propName = "selectedIndex"
> 
> ```

also id advice to put the propName "position" at the top instead of somewhere in the middle of the code, thats why i made it a varriable 😛

---

<div class="post-metadata">

**Author:** ![Micah\_Carr](https://avatars.discourse-cdn.com/v4/letter/m/bbe5ce/32.png) [@Micah\_Carr](https://forum.inductiveautomation.com/u/Micah_Carr)\
**Post date:** [October 6, 2023, 1:26pm UTC](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268/8 "2023-10-06T13:26:30Z")

</div>

This works perfectly for me in the designer, but the selectedIndex never changes when run in a browser session. (tested in both Chrome and Edge)

---

<div class="post-metadata">

**Author:** ![Micah\_Carr](https://avatars.discourse-cdn.com/v4/letter/m/bbe5ce/32.png) [@Micah\_Carr](https://forum.inductiveautomation.com/u/Micah_Carr)\
**Post date:** [October 6, 2023, 2:59pm UTC](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268/9 "2023-10-06T14:59:16Z")

</div>

nevermind, it does not seem to work in the designer anymore either. I must have messed something up..

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 9, 2023, 6:39am UTC](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268/10 "2023-10-09T06:39:42Z")

</div>

not sure iit ever works in the designer, many of the js injections don't because the designer isnt a standard webbrowser.  
but the commponent i posted should work

---

<div class="post-metadata">

**Author:** ![bas.dejong](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@bas.dejong](https://forum.inductiveautomation.com/u/bas.dejong)\
**Post date:** [August 15, 2024, 2:35pm UTC](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268/11 "2024-08-15T14:35:10Z")

</div>

This is awesome