How can you get the caret position when working from an event?

Question

Looking at the Locker documentation they list selectionStart as being a valid attribute, but I can't find a way to access it.

I am trying to write an input masking utility, and everything works fine as long as the caret position is at the end of the input. If the user tries to edit in the middle, the caret gets moved to the end of the input.

If I were just working in normal javascript, I would simply call

var pos = document.activeElement.selectionStart;
...
document.activeElement.setSelectionRange(pos,pos);

But in Lightning Locker, activeElement is the lightning:input node and not the actual input, as such selectionStart is undefined.

From the onchange event, how can I get to the changed HTMLInputElement so I can call selectionStart and get the current caret position?

Answer 1

To answer your question directly, Salesforce would have to expose these attributes to you with additional code, etc. As such, there's no way to access the attributes unless they were exposed. You can write your own custom component, however, using SLDS.

Native HTML elements have limited Locker Service protection so you can access many of their normal attributes. You would need to do something like this anyways if you wanted special masks like ***-**-**** or (___) ___-____. The SecureElement reference is mostly meant to let developers know what attributes you can access from native HTML DOM elements.