How to find text area cursor position?

I have plain vanilla textarea in my DCT with the FormAPI callout associated with it.

There are no VFE, TinyMCE or any other Editor of this nature and I do not want them
there. Is it possible to figure out text area cursor position within JS function that I call?

Relevant hints, tips and rtfm's welcome

Find more posts tagged with

Comments

Adam Stoller

I have plain vanilla textarea in my DCT with the FormAPI callout associated with it.

There are no VFE, TinyMCE or any other Editor of this nature and I do not want them
there. Is it possible to figure out text area cursor position within JS function that I call?

Relevant hints, tips and rtfm's welcome

Can you provide a bit more context here - FormAPI doesn't support key-stroke processing - it's "onItemChange" event handler only fires off when the focus leaves the textarea, and thus I'm not sure that there is a cursor position to capture.

What, exactly, are you trying to accomplish?

ISCBorisB

Can you provide a bit more context here - FormAPI doesn't support key-stroke processing - it's "onItemChange" event handler only fires off when the focus leaves the textarea, and thus I'm not sure that there is a cursor position to capture.

What, exactly, are you trying to accomplish?

Thanks Adam.

Callout in this case is really some GUI Window that my Contributor can navigate.

Depending on the input I automatically generate certain formatted chunk of text
and want to insert it into the textarea at the current Cursor position. All this
rigmarole exists and works flawlessly as (one of the) custom VFE Event.

I had a request to "port" it to the textarea/callout combination (eg - no VFE) and have no problems
whatever doing that - except for the very last step. Sure enough, I can insert my generated
text fragment anywhere in the textarea. I just want to know (if that's at all possible)
where textarea Cursor was when my Client clicked "callout" button. I certainly realize
that "textarea" TS Widget loses Focus at this moment.

Makes sense?

Adam Stoller

Hmm - well, off the top-of-my-head, if you cannot get it to work within the Edit DCR window proper, perhaps you can have a callout button on the DCT form that launches a window with a basic HTML textarea (for which you can explicitly provide a name and id) and then do the javascript code necessary to track the cursor position in that textarea - and then use a submit button to transfer the finished result back down into the DCT form (perhaps an otherwise read-only textarea?)

You could try to do it within the Edit DCR window proper, but I think that the way IWOV designed those forms is very convoluted with respect to the actual HTML entity item names and ids, such that trying to get a handle on it to use what might be fairly basic javascript, turns out to be a major headache.

jagadesh

Hmm - well, off the top-of-my-head, if you cannot get it to work within the Edit DCR window proper, perhaps you can have a callout button on the DCT form that launches a window with a basic HTML textarea (for which you can explicitly provide a name and id) and then do the javascript code necessary to track the cursor position in that textarea - and then use a submit button to transfer the finished result back down into the DCT form (perhaps an otherwise read-only textarea?)

You could try to do it within the Edit DCR window proper, but I think that the way IWOV designed those forms is very convoluted with respect to the actual HTML entity item names and ids, such that trying to get a handle on it to use what might be fairly basic javascript, turns out to be a major headache.

I hope using jquery you can achieve on onclick functionality in textarea but I am not sure whether you can track mouse click position in text area. Darren has given samples on onclick to auto populate values in text box

Migrateduser

I found this code on another site. So I cannot take blame or credit.

[PHP]
<script>
function getCaret(el) {

el = document.getElementById(el);

if (el.selectionStart) {
return el.selectionStart;
} else if (document.selection) {
el.focus();

var r = document.selection.createRange();
if (r == null) {
return 0;
}

var re = el.createTextRange();
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);

var add_newlines = 0;
for (var i=0; i if (rc.text.substr(i, 2) == '\r\n') {
add_newlines += 2;
i++;
}
}

return rc.text.length + add_newlines;
}
return 0;
}

</script>

getposition
[/PHP]

jQuery, as mentioned before is a good (and many easier) option.

[PHP]
textArea.addMouseListener(
new MouseAdapter() {
public void mouseClicked(mouseEvent me) {
// this should move the caret
// now insert text
textArea.insertText("TEXT TO INSERT"
,textArea.getCaretPosition());

}
}
)
[/PHP]

If your callout cannot see the last position from the DCR easily then a possible solution for keeping the position that you found would be to have a hidden field where you store the found position that you found. Then your callout can read that hidden field using FormAPI.

ISCBorisB

Thanks all.

As already has been noted by Ghoti, the biggest issue of bypassing FormAPI and doing it directly
with JS is getting a handle of *real* DOM textarea rather than exposed FormAPI Item Object. In my
case that's complicated further by the fact that the Item in question belongs to nested replicant
Containers (eg, getElementBy[Name | ID] can not be set statically with the casual look at
"View Source", etc)

I'll see what I can do with plain JS and little reverse engineering.

Migrateduser

post deleted

Migrateduser

You can hide the field position on the form

[PHP]

Item + Buttons

Product/Solution - single
model

postionholder

<script> IWEventRegistry.addFormHandler("onFormInit", init); function init() { IWEventRegistry.addItemHandler('/cnt/model', 'onCallout', getCaret); } function getCaret(item) { var el = _iwdatacapture.getFormElementFromItem( _iwdatacapture.activeItem ); if ( !el.focus && el[0] ) { el = el[0]; } el = top.getDCFrame(self).formframe.document.getElementById(el.id); if (el.selectionStart) { return el.selectionStart; } else if (document.selection) { el.focus(); var r = document.selection.createRange(); if (r == null) { return 0; } var re = el.createTextRange(); rc = re.duplicate(); re.moveToBookmark(r.getBookmark()); rc.setEndPoint('EndToStart', re); var add_newlines = 0; for (var i=0; i<rc.text.length; i++) { if (rc.text.substr(i, 2) == '\r\n') { add_newlines += 2; i++; } } IWDatacapture.getItem('positionholder').setValue(rc.text.length + add_newlines); } return true; } </script>

[/PHP]

And access the position from your callout with this. (below is a snippet of the entire callout)

[PHP]
my $form_name = $cgi->{'form'}{'iw_form_name'};

var calloutForm = eval($form_name);
var positionholder = calloutForm.elements['positionholder'].value;

[/PHP]

I'm sure the code above could use some improvements. Make it more dynamic, yada, yada, yada. But it should be enough to get you started.

ISCBorisB

...the biggest issue of [...] doing it directly with JS is getting a handle of *real* DOM textarea...

I've ended up with the following hack to obtain a Handle of the *raw* textarea DOM Object behind FormAPI Item:

var taItem = IWDatacapture.getItem("Item's XPath");
var taID = 'field_' + taItem.itemImpl.getInstanceID();
var taRaw = top.frames.formframe.document.getElementById(taID);

The difference with earlier taalgaard proposal is that it allows me to obtain DOM Object from any
Item, active or otherwise (significant in my case where callout button *belongs* to the Replicant
Instance and not to any particular item within it)

Beware. Both approaches are hacks, neither documented nor supported.

The rest of solution was trivial, plain JS. I've slightly massaged one of the mutations of Net - ubiquitous
getCaret Method