Inserting a string in the middle of another string

Hi,

I’m working on a prototype that allows the user to select anywhere within a text field and allow them to add pre-defined strings.

Example:
[ol]
[li]1. Inside an editable text field: “Hello world!”
[/li][li]2. User clicks between “Hello” and “world!” to put the text cursor at that location.
[/li][li]3. User clicks a button named Insert “Crazy”
[/li][li]4. Text field should now say: “Hello crazy world!”
[/li][/ol]

I’ve been searching for a way to do this for a couple of days now, and I’m unable to find a solution.

Hi!

You’ll need to call javascript to do this.

The field in this example sets the variable OnLoadVariable to the caret position in the field upon OnClick, OnFocus, OnTextChange, and OnKeyUp. (If you want to use a different global variable, just change it in the javascript, which is embedded in the Open Page command, as well as in the Crazy button - after adding the variable to the global variables list, of course.)

Clicking the button uses that variable with string operations to insert the value.

Note that this won’t work in pre-11 versions of IE. Also note that the name of the field must not be null and needs to be unique.

Live sample

File: get caret position.rp (50.7 KB)

1 Like

Thank you so much, josephxbrick! This was exactly what I needed, and your explanation helped me adapt the code to my prototype.

One more question: Is there a way to also be able to replace highlighted strings OnClick? For example, if the user highlighted “Hello” from “Hello World!”, then decided to want to Insert “Crazy”, it would result in “Crazy World!”

Hi!

Yes. Let’s say you have two global variables, gv_start and gv_end. The following javascript will set these two variables to the start and end of the selection.

javascript:
var ctrl=$("[data-label=’[[This.name]]’]").children().first()[0];
var pos1=ctrl.selectionStart;
var pos2=ctrl.selectionEnd;
$axure.setGlobalVariable(‘gv_start’, pos1.toString());
$axure.setGlobalVariable(‘gv_end’, pos2.toString());
void(0);

If gv_start and gv_end are the same, there is no selection; in this case, you’d use your existing code (with the updated variable name). If gv_end is greater than gv_start, there is a selection that goes from gv_start to gv_end. (gv_end is greater whether you selected from right to left or from left to right.)

This should give you enough information to do the necessary string manipulation, but post here if stuck! Also, don’t forget to use the Console tab that Axure puts at the left side of the browser when previewed. Here you can see the values of your global vars.

Again, IE pre-11 is a non-starter with this method. If anyone out there wants to add the legacy-IE code, please do so!

Hi guys,
I’ve tried to adapt this example to a case where you can insert the selection of a dropdown right at any cursor position, but I’m having trouble understanding how to do it. Newbie here.
So, instead of a button that says “Crazy” it’s a dropdown that has Option 1, 2 or 3, that on the selection change will insert it at the cursor’s position.
Any ideas?
Thank you