# Cursor position in text field

**URL:** <https://forum.inductiveautomation.com/t/cursor-position-in-text-field/56980>\
**Category:** Ignition\
**Created:** [March 8, 2022, 8:00pm UTC](https://forum.inductiveautomation.com/t/cursor-position-in-text-field/56980 "2022-03-08T20:00:21Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![bebel](https://avatars.discourse-cdn.com/v4/letter/b/43a26b/32.png) [@bebel](https://forum.inductiveautomation.com/u/bebel)\
**Post date:** [March 8, 2022, 8:00pm UTC](https://forum.inductiveautomation.com/t/cursor-position-in-text-field/56980/1 "2022-03-08T20:00:22Z")

</div>

I have a Perspective text field with a text string. I have buttons which allow the user to append select unicode characters (such as up or down arrows) to the end of the string. The buttons simply take the string from the text field / add the character to the end / and stick the new string back in. I would like to add a custom property to the text field that keeps track of the last cursor position when the field had focus so that when they click a button, the character can be added where the cursor was. I see that there is a mouse click position, which is close, but doesn’t really provide a good mathematical way to track the cursor. Especially since it can be altered by mouse clicks as well.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 8, 2022, 8:06pm UTC](https://forum.inductiveautomation.com/t/cursor-position-in-text-field/56980/2 "2022-03-08T20:06:10Z")

</div>

Perspective? If so, I think you are out of luck.

~~Vision? If so, you can dig under the hood for the text field’s selection controls, where you can monitor and dictate where the cursor is or what fragment of the text is selected.~~

Just noticed “Perspective” in the first sentence. (Just added?)

---

<div class="post-metadata">

**Author:** ![josborn](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@josborn](https://forum.inductiveautomation.com/u/josborn)\
**Post date:** [March 8, 2022, 8:13pm UTC](https://forum.inductiveautomation.com/t/cursor-position-in-text-field/56980/3 "2022-03-08T20:13:03Z")

</div>

There is a topic where another forum member was trying something similar.

> [@Get caret position from text input](https://forum.inductiveautomation.com/t/get-caret-position-from-text-input/55786/4):
>
> Hi, thanks, but I checked that we are using Perspective not Vision. I am trying to call it at Text Input. We built alphanumeric keyboard as a component so we dont use the tablet mode keyboard on touchscreen. So I dont know if its possible but it would be great work it like that, Text input is focused - touch of the button (lets say key A) and it checks caretp position and adds a key. I am afraid that when I touch the button, the focus is lost from Text input so the caret position would not work…

While it may be possible, its certainly not going to be easy or clean.

---

<div class="post-metadata">

**Author:** ![bebel](https://avatars.discourse-cdn.com/v4/letter/b/43a26b/32.png) [@bebel](https://forum.inductiveautomation.com/u/bebel)\
**Post date:** [March 8, 2022, 8:27pm UTC](https://forum.inductiveautomation.com/t/cursor-position-in-text-field/56980/4 "2022-03-08T20:27:10Z")

</div>

Yes, as stated this is Perspective. If there is no way to expose the cursor position, I have an alternate method I dreamt up. I’m just not sure it is better than having them erase back to where they want the character and then rebuilding the rest of the message.  
I have defer updates set to false. I could have them type a special character like ‘~’ where they want something inserted. When that is detected in the string, I could use a popup, or just make a 'character palette visible. When they select the character they want, I could substitute in for the special character, then send focus back to the text field. It just seems even less intuitive than having to erase back to the desired location. I would need to have detailed instructions on the form.

---

<div class="post-metadata">

**Author:** ![josborn](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@josborn](https://forum.inductiveautomation.com/u/josborn)\
**Post date:** [March 9, 2022, 1:03am UTC](https://forum.inductiveautomation.com/t/cursor-position-in-text-field/56980/5 "2022-03-09T01:03:54Z")

</div>

I spent some time playing with this, and made some progress by using a string array tag and a custom property for the position. The left and right arrow keys will update the position property and insert an underscore at he array element corresponding the the position property. Next i used some key event scripts to insert typed characters into the array. I wasnt able to figure out how to capture the backspace event, and it completely ignores where clicked into the text field.

It works, but feels hacky and way too complicated, just deleting back to where you want to start typing is probably the way to go.

---

<div class="post-metadata">

**Author:** ![bebel](https://avatars.discourse-cdn.com/v4/letter/b/43a26b/32.png) [@bebel](https://forum.inductiveautomation.com/u/bebel)\
**Post date:** [March 9, 2022, 1:47am UTC](https://forum.inductiveautomation.com/t/cursor-position-in-text-field/56980/6 "2022-03-09T01:47:58Z")

</div>

Sounds like this is more work than it is worth for my application but I appreciate the insights.

---

<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:** [March 9, 2022, 7:48am UTC](https://forum.inductiveautomation.com/t/cursor-position-in-text-field/56980/7 "2022-03-09T07:48:55Z")

</div>

Yeah you need js to do this, which means you would need to make your own module, which is a lot of work xd

Depending on what needs to be typed i suppose an other option could be a flexrepeater with a textfield with the lenght of 1 char and every time a char is added it makes a new instance of the field.  
Then you can use tab to move to the next. (and shift+tab to move back)  
So you should be able to know which instance you are in to add your input inbetween

But i doubt it will be responsive enough… so you would have to be able to handle multiple letters in one textfield and then make it split itself up with a script.

You’ll also have to juggle with auto focus so you dont have to press tab on every key entry

---

<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, 9:07am UTC](https://forum.inductiveautomation.com/t/cursor-position-in-text-field/56980/8 "2023-08-02T09:07:53Z")

</div>

if you still need it, found something

> [@Get Cursor position in Text Area Component](https://forum.inductiveautomation.com/t/get-cursor-position-in-text-area-component/77268/2):
>
> you'll need to put a domId on your textfield #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(){ c…
