Skip to main content
2m91_2
2m91_2
Inspiring
May 15, 2011
Question

How to set caret (cursor) position in a textField from a KeyEvent...

  • May 15, 2011
  • 1 reply
  • 6963 views

...that follows the up-Arrow.

Hi all,

I'm building part of an UI that suggests certain words based on to the user's input. (Quit like Google's suggestions) It works quite well but one detail bothers me:

When I have a list of suggestions I highlight the list-items by listening to the arrow up and down keys. When the fist element is highlighted, and the user presses the up arrow, I want the cursor to be in the Text(Input)Field again, but at the last position.

(I removed the focus from the InputField not to move the cursor in my singel line field to the first position when the up-arrow is pressed)

I set the cursor to the last Position using setSelection() but as it is the field receives the key-press after my event callback is executed and the pressing of the up-arrow in a single line field does what it always does, it places the cursor at the first position.

My somewhat dirty solution is to use a Timer to solve it, but a fast typer might still experience problems.

I considered using the CHANGE event, but as the arrow key does not actually change the content of the TextField, that is not working. Still I think that the solution might be along that way, as the CHANGE event is/would be at the end of the event-chain, where I need to do the repositioning of the cursor.

I did some research, but could not find something so I would be very glad I someone could point me into the right direction.

TA

M

This topic has been closed for replies.

1 reply

A
Andrei1-bKoviI
Inspiring
May 15, 2011

Are you using the same textfield for both what user types and suggestions?

2m91_2
2m91_2Author
Inspiring
May 15, 2011

No, I don't. I have one (Input)Textfield, that is the one I'm Talking about. the fields I use for suggestions aren't even selectable. Actually, I don't "touch" the in any way during the described process. During highlightnig of the Suggestinon I keep the focus "null".

Meanwhile I remembered some pages in Colins "Essential AS3" about preventing the default behavior, and reread it, but still i only found out how to change the default behavior of TEXT_INPUT, and the arrow keys obviously do not trigger that event....

A
Andrei1-bKoviI
Inspiring
May 15, 2011

I am not aware of any way to prevent this behavior but you can reverse it. Try and see of the following works for you. Code assumes that textfield instance name is tf:

var originalSelection:int = 0;

tf.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDownHnadler, false, 100);
tf.addEventListener(KeyboardEvent.KEY_UP, onKeyUpHandler, false, 100);
function onKeyDownHnadler(e:KeyboardEvent):void{
     if (e.keyCode == Keyboard.UP || e.keyCode == Keyboard.DOWN) {
          originalSelection = tf.selectionBeginIndex | tf.selectionEndIndex;
     }
}

function onKeyUpHandler(e:KeyboardEvent):void{
     if (e.keyCode == Keyboard.UP || e.keyCode == Keyboard.DOWN) {
          tf.setSelection(originalSelection, originalSelection);
     }
}
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices