8 Replies Latest reply: May 15, 2011 12:25 PM by 2m RSS

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

    2m Community Member

      ...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

        • 1. Re: How to set caret (cursor) position in a textField from a KeyEvent...
          Andrei1 Community Member

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

          • 2. Re: How to set caret (cursor) position in a textField from a KeyEvent...
            2m Community Member

            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....

            • 3. Re: How to set caret (cursor) position in a textField from a KeyEvent...
              Andrei1 Community Member

              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);
                   }
              }
              
              • 4. Re: How to set caret (cursor) position in a textField from a KeyEvent...
                2m Community Member

                Tanks a lot. I'll give that a try if I cannot find a better solution. It is somehow similar to using my timer, but slightly more elegant.

                M

                • 5. Re: How to set caret (cursor) position in a textField from a KeyEvent...
                  Andrei1 Community Member

                  You are welcome.

                   

                  Timer is practically never an elegant solution in cases of interactivity workarounds IMO.

                  • 6. Re: How to set caret (cursor) position in a textField from a KeyEvent...
                    2m Community Member

                    I totally agree. But (smart *** that I tend to be - sorry) Your solution isn't perfect too, as for one thing, the Cursor most times blinks at least once at the "wrong" (first) position and I have to remove the KEY_UP listener (which is additional work.... ;-) ).

                     

                    I found a thread over at http://stackoverflow.com/questions/1018259/how-do-you-prevent-arrow-up-down-default-behavi our-in-a-textfield, and I did more research, along that line. I tried Event priority and tinkered with the bubbling- and capturePhases using the stage and the textfield as targets. I even achieved the right order of events, but still I couldn't find a way to prevent the up-arrow from moving the cursor to the front within my event-chain..

                     

                    (I even tried changing the textfield's type temporarily to dynamic with no luck at all)

                     

                    Even if I can run with what we have, I still would be very interested in a "cleaner" solution.

                     

                    Thanx

                     

                    M

                    • 7. Re: How to set caret (cursor) position in a textField from a KeyEvent...
                      Andrei1 Community Member

                      Well, "my solution" was not meant to be perfect to begin with for it is out of the context of aggregation with other interactions. Of course, result depends on such factors as architecture of your application and display list(s) structure in particular. With that said - I suspect, given that there is no way to natively remedy textfiled behavior in question, solution will be very much a custom fine-tuning based on trial and error (as well as level of perfection one pursues :-)

                      • 8. Re: How to set caret (cursor) position in a textField from a KeyEvent...
                        2m Community Member

                        I really didn't mean to criticize you or the idea you offered. I still think it is a very good one. My last comment just meant, that I don't consider the case fully closed. Not so much because I "need" to find a perfect solution, but more because I hoped for even deeper insight - I just felt that ther might be a way to hinder the execution of "default" arrow-key behavior. It might come a situation, where this would be necesary.

                         

                        You offfered a very good solution for my problem: Thank You! (I mean it!)

                         

                        Still I would be interested in:

                         

                        A: a way to set (new) focus to a textfield with the up-key without triggering the default cursor-movement in said textfield.

                        and/or

                        B. a way to supress default behavior of the arrow-keys (maybe tabs?) but still receiving the events to use them "manually"