Keyboard Cursor Position

[DRC]

Hi,

I’m modeling a discreet search experience similar to a multiselect and need to position the keyboard cursor in the text field in a certain place, based upon the other elements already in the text field. (See screenshot) I need to have the cursor position on the other side of the chicklet, “Benefit Package” when the user clicks into the field again. And when the click fires a dropdown appears, which features a predictive/deductive search (which is already working fine).

I’m wondering how to do that/what the method is for positioning a cursor in such a manner. Does anyone have any ideas?

Thanks,

DRC

[UXProtoTyper]

Hey There!

As they say, the devil is in the details, but here’s an approach that might work for you. I don’t know how your chicklets are added, but looking at it, i’m guessing you might be using a repeater?

In my example, I have two repeaters - one for the selector, and one for the added chicklets. I also created a “fake” text field that acts as the border for the text input. When you click on it, it sets focus on the a separate “real” text field that is smaller. The selected chicklet repeater has an action to move the real text field. So when I add an item it moves the text field to the right - and i set it up so that the selector moves with it. As such when you refocus the field it looks like the cursor has moved (but in reality the whole text box has moved).

Faking Out Moving Cursor.rp (52.7 KB)

There are some things to figure out - like wrapping, if applicable, and if your chicklet is dynamic moving it the right distance - but hopefully this gets the wheels turning.

I also thought about using javascript - but the JS functions would allow you to position the cursor caret within text - which I think would get really messy with the chicklets since you need to allow space for things that aren’t text - like your vertical ellipsis.

[DRC]

Ahh hah! Yes, very cleaver! And it’s such an easy solution too. Thank you!

And yes, I’m using repeaters but I haven’t figured out how to set text on a specific repeater chicklet item, so I’m still tinkering with that.

Thanks again!

DRC

[UXProtoTyper]

Good deal. If you could use assistance with setting text on the repeater, just holler. In my example on click of the rectangle in the “ChickletSelector” repeater, I just add a row to the “Added Chicklets” repeater with the value of the item.

[DRC]

Hiya UXProtoTyper,

Can I ask you for a bit of help with a related challenge? I need to figure out how to make the size of the chicklet dynamically resize to accommodate the length of a given word (see screenshot).

To review, I’m using a “fake search box” with borders turned off, that when you click into it reveals a dropdown menu. When you select and item from the dropdown menu it appears in the search field as a chicklet item. What I’m doing behind the scenes is to set text on a the chicklet DP to equal the item in the repeater. As I didn’t have a need to model more than three of these, I simply created two more fake search boxes that model the same thing.

How can I get the chicklet DP to change size according to the length of the word?? (Also, the “X” on the chicklet is it’s own DP as well.

Thanks for your help. I’m learning a lot

DRC

[UXProtoTyper]

Hey there!

So you can fake this natively in axure by getting the length of the text and multiplying it by a fudge factor to make the chicklets relatively dynamic. It takes some trial and error with your font - but the idea is you figure out the average width of a character given the font you’re using and setting the width of the chicklet accordingly by multiplying the number of characters by that width and including the width of the “X”.

You can also use some javascript to calculate the actual width using a canvas - this gets complicated. Not sure what your JS expertise level is.

In either case, you’ll need to account for this dynamic width in the logic discussed previously for moving the text field.

[system]

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.