4 Replies Latest reply on Sep 21, 2009 2:47 PM by cybersnl

    How to move the cursor in a text input programatically

    cybersnl

      Hi,

       

      I am using a TextInput field and a my own keyboard UI with buttons for each alphabet.

       

      When the user presses buttons on the keyboard UI, i populate the TextInput field through data binding.

       

      But I would want the cursor to move as the characters are entered in the field at the same time.

       

      So, how do I move the cursor using actionscript code?

       

      thanks,

      Sunil

        • 1. Re: How to move the cursor in a text input programatically
          adobe_paul Adobe Employee

          Assuming you're using the Flex TextInput component, call the setSelection() method with the same value for the begin and end parameters. That moves the insertion point to the specified location.

           

          http://livedocs.adobe.com/flex/3/langref/mx/controls/TextInput.html#setSelection()

          • 2. Re: How to move the cursor in a text input programatically
            cybersnl Level 1

            Hi Paul.

             

            that works great. Now i can see the cursor move as i type buttons in my custom keyboard. Thanks for the tip.

             

            But one thing I can't figure out yet is that: if the user directly enters into the TextInput field and moves the curson to somewhere in between,

            at this point when I press the buttons in my custom keyboard, how do i get new characters to be entered at the current cursor position (not at the end of the already typed-in string).

             

            Basically, the user can either enter into the textinput directly or use my own custom keyboard.

             

            The scenario I am talking about is: i want to create my own dialer for example. I have attached something similar, as skype dialer keypad.

            • 3. Re: How to move the cursor in a text input programatically
              adobe_paul Adobe Employee

              In that case you need to programmatically insert the text at the selection point. You get the selection point using the selectionBeginIndex and selectionEndIndex properties. I have an app where I do that, using this code:

               

              // textInput is the name of the TextInput control

               

              private function insertTextAtSelection(text:String):void
              {
                   var start:int = textInput.selectionBeginIndex;
                   var end:int = textInput.selectionEndIndex;
                   var hasSelection:Boolean = start != end;
                    textInput.text = textInput.text.substring(0, start) + text + textInput.text.substring(end);

               

                   if (hasSelection)
                   {
                       textInput.selectionBeginIndex = start;
                       textInput.selectionEndIndex = start + text.length;
                   }
                   else
                   {
                       textInput.selectionBeginIndex = textInput.selectionEndIndex = end + text.length;
                   }

              }

               

              This is what the code does:

              1. gets the starting and ending positions of the insertion point (in case the user has an active selection rather than just an insertion point).
              2. concatenates the old text with the new text and writes it into the text input
              3. restores the user's previous selection or insertion point (In this case I'm setting the selectionBeginIndex and selectionEndIndex properties rather than calling setSelection(), but the end result is the same.)
              • 4. Re: How to move the cursor in a text input programatically
                cybersnl Level 1

                Thanks Paul.

                 

                Your code and input was really helpful. It works.

                 

                -Sunil