This question boils down to needing to get the cursor position of a <textarea>
element in a directive. In short, all I need to work in this.
var position = element.selectionStart;
There are at least 5 answers on the subject using various methods, e.g. this one for angular, this one for some jQuery extension, enter link description here.
I have read them all and decided to just try to get the selection start object. Here is my PLNKR. I have no idea what I am doing wrong. Note - the background change stuff is to see whether or not I am selecting the right element, which I am. Edit here is a snippet of the code that fails:
link: function(scope, elem, attrs) {
var textArea = elem.find("#itemTextArea");
textArea.bind('click', function() {
//This gets to undefined, even though selectionStart is a property of textarea*
scope.testValue = elem.selectionStart;
});
},
*https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Property/selectionStart
P.S. Click on text area to immediately know what's happening in directive.
The syntax you are looking for is:
scope.testValue = textArea.prop("selectionStart");