Place caret at a particular character in a text box control

[Scott B]

Here's the scenario: a simple UX containing a text box (TEXT1) and a button (BUTTON_1). The default value in the textbox is, "Hello, name is [Scott]"

Ideally, I would like the button to have an onclick event whereby the cursor (aka. the caret) is positioned just before the first bracket, allowing the user to more easily select the braceted text. Of course, an even better solution would be if the onclick event could just highlight the bracketed text.

Any ideas (javascript preferred)?

Thanks!

[jgrannis]

Re: Place caret at a particular character in a text box control

How about this code for the button's onClick:

var input = document.getElementById('DLG1.V.R1.TEXTBOX1');
input.selectionStart = 15;
input.selectionEnd = 22;
input.focus();

Assuming that your textbox has the ID of DLG1.V.R1.TEXTBOX1 (do a view source in Working Preview and look for the ID of your textbox)

[Scott B]

Re: Place caret at a particular character in a text box control

Thanks Jeff. Unfortunately, that doesn't seem to work. It just moves the caret to the end of the text.

[jgrannis]

Re: Place caret at a particular character in a text box control

Worked for me in Working Preview (using both Chrome and IE). With Live Preview, it worked with IE and Firefox but not Chrome. I didn't try making it a PhoneGap app.
I guess it needs to be tweaked some.

[Scott B]

Re: Place caret at a particular character in a text box control

Jeff - sorry about that. It works just fine. I had the ID wrong. Thanks!

[Scott B]

Re: Place caret at a particular character in a text box control

In the spirit of full documentation (and to help others experiencing a similar issue), here is the enhanced code I used (based on Jeff's premise above):

var input = document.getElementById('DLG1.V.R1.TEXT1');

var str = {dialog.object}.getValue('TEXT1');
var start = str.indexOf("[");
var end = str.indexOf("]");

input.selectionStart = start
input.selectionEnd = end+1
input.focus();

[Scott B]

Re: Place caret at a particular character in a text box control

UPDATE: I just published and have discovered that it does not work in IE, Edge OR Chrome. Jeff, as you point out, it works in Working Preview mode.

Anyone have any ideas?

[GGandhi]

Re: Place caret at a particular character in a text box control

var input = document.getElementById('DLG1.V.R1.TEXT1');

you have hard coded the input element and when you publish it won't be found. you should use alias so it gets translated properly.
var input = document.getElementById('{dialog.ComponentName}.V.R1.TEXT1');

also please note while the javascript need not end in ";" it is better to end with that.

input.selectionStart = start;
input.selectionEnd = end+1;

also may i suggest instead,

input.selectionStart = start + 1;
input.selectionEnd = end;

or just one line as
input.setSelectionRange(start+1, end);

so the name is highlighted and can be repeatedly changed if one so desires.

[Scott B]

Re: Place caret at a particular character in a text box control

Thanks so much! I like your suggestion also... going to make that change.