19 Replies Latest reply on May 12, 2009 7:11 PM by GordonSmith

    Highlight all Textarea text

    ShaF10 Level 1

      Hi Guys

       

      I have several text areas in a VBox called documentContainer. Now, what I want to do is when a user presses the "a" button the text in all the textareas is selected. I have managed to get it to partially work in that it'll select all the text in the current textarea, but it will not select the text in the other textareas. Code below:

       

      if(event.keyCode == 65) {
           for(var i:uint=0; i<documentContainer.numChildren; i++) {
                 var taTextSelection:TextArea = documentContainer.getChildAt(i) as TextArea;
                 taTextSelection.setSelection(0, taTextSelection.length);
           }
      }
      
        • 1. Re: Highlight all Textarea text
          Gregory Lafrance Level 6
          Maybe this?
          taTextSelection.setSelection(0, taTextSelection.text.length);
          • 2. Re: Highlight all Textarea text
            ShaF10 Level 1

            Ah yes, that fixed the problem. It still doesn't work the way I want it to work though. All the text is selected but the text background colour only changes  for the textarea that is selected, the other textareas text will only highlight when I focus on them. Is there a way I can overcome this ?

            • 3. Re: Highlight all Textarea text
              Gregory Lafrance Level 6

              Maybe use focusManager to add to the controls currently having focus?

              1 person found this helpful
              • 4. Re: Highlight all Textarea text
                ShaF10 Level 1

                I had a quick play around with the focusManager but I cannot get it to work with that either.

                • 5. Re: Highlight all Textarea text
                  Gregory Lafrance Level 6

                  Can you post simplified yet complete code with the multiple TextArea so I can investigate?

                  • 6. Re: Highlight all Textarea text
                    _Natasha_ Level 4

                    Hi,

                     

                    you can set to your component focus:

                    taTextSelection.setFocus()

                    • 7. Re: Highlight all Textarea text
                      Gregory Lafrance Level 6

                      He needs to set the focus to be three TextArea that have the focus simultaneously.

                      • 8. Re: Highlight all Textarea text
                        run,ryan! Level 3

                        In docs it says

                        Selects the text in the range specified by the parameters.    If the control is not in focus, the selection highlight will not show    until the control gains focus. Also, if the focus is gained by clicking    on the control, any previous selection would be lost.

                        I guess you want to give user an option to copy or delete all the text in all the textarea?

                        try to do it in another way, like a button called 'copy all' to create a collection of all the text inputed

                        1 person found this helpful
                        • 9. Re: Highlight all Textarea text
                          ShaF10 Level 1

                          Ah man. If anyone has any workarounds, they would be much appreciated.

                           

                          At the moment I am thinking of collecting the textarea content and placing it into a string and then create an almost transparant wire rectangle to cover all the textareas to indicate a complete selection has taken place. What do you guys think ?

                          • 10. Re: Highlight all Textarea text
                            Gregory Lafrance Level 6

                            You could, I think as you indicated, allow the user to activate some "selection tool", which would change the cursor and allow the user to click-drag to encircle are area in a hollow rectangle.

                             

                            After mouse up, you could change the background color and text color of any TextArea within that region to simulate multiple selection, and popup a modal TitleWindow asking if user wants to select all highlighted text.

                             


                            If user clicks yes, you copy the text from all the "highlighted" TextArea to a variable or Array.

                             

                            If they click no, "deselect" the TextAreas by returning their background and text colors to normal.

                            • 11. Re: Highlight all Textarea text
                              ShaF10 Level 1

                              Thats a good idea, the popups might annoy some users though.

                              • 12. Re: Highlight all Textarea text
                                Gregory Lafrance Level 6

                                The popup is not absolutely necessary. User clicks/drags to highlight within the hollow rectangle. If the click again, the previous selection is wiped out.

                                 

                                When they release the mouse button after dragging, you can just copy at that point.

                                • 13. Re: Highlight all Textarea text
                                  run,ryan! Level 3

                                  something like this?

                                  <?xml version="1.0" encoding="utf-8"?>
                                  <mx:Application
                                  xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
                                  width="100%" height="100%" backgroundColor="#eaf1f6"
                                  backgroundGradientAlphas="1.0,1.0">
                                      <mx:Script>
                                          <![CDATA[
                                              import mx.controls.Alert;
                                              
                                              public var myResult:String;
                                              private function selectAll():void
                                              {
                                                  t1.enabled = !t1.enabled;
                                                  t2.enabled = !t2.enabled;
                                                  myResult = 't1:' + t1.text + ';t2:' + t2.text;
                                              }
                                          ]]>
                                      </mx:Script>
                                      <mx:TextArea id="t1" text="dsadasdasd"/>
                                      <mx:TextArea id="t2" text="asdasdsad"/>
                                      <mx:Label id="savedText" enabled="false" includeInLayout="false"/>
                                      <mx:Button label="toggle editable" click="selectAll()"/>
                                      <mx:Button label="result" click="Alert.show(myResult);"/>
                                  </mx:Application>
                                  

                                  create a window over those textarea when they are not editable with some showEffect will make it more beautiful

                                  • 14. Re: Highlight all Textarea text
                                    ShaF10 Level 1

                                    Thanks for the input. I have decided to integrate two features, the first is if the user presses ctrl+a and it will get all textareas and place them into a string and change the background colour of all textareas. The other is to create a button to do the same.

                                    I have a little dilemma though, how do I check whether the user and selected or not select the text ? I am thinking of creating a flag variable and mark it as true when the user makes a selection and check for that when certain event listeners are registered. What do you guys think ?

                                    • 15. Re: Highlight all Textarea text
                                      Gregory Lafrance Level 6

                                      I don't understand this:

                                       

                                      "how do I check whether the user and selected or not select the text ?"

                                       

                                      but sure, you can use a flag to indicate a selection has been made.

                                      • 16. Re: Highlight all Textarea text
                                        ShaF10 Level 1

                                        Sorry about that, not to worry though as I have managed to fix all of the problems above.

                                         

                                        Now I just need to find a way of copying a string to the clipboard. Any ideas ?

                                        • 17. Re: Highlight all Textarea text
                                          ShaF10 Level 1

                                          Clipboard issue fixed.

                                          • 18. Re: Highlight all Textarea text
                                            Gregory Lafrance Level 6

                                            I believe this is how it is done:

                                             

                                            var myString:String = "test string";
                                            System.setClipboard(myString);

                                             

                                            You might not be able to read the clipboard once set in Flex though. You can in AIR. Here is another example I found on a blog:

                                             

                                            <?xml version="1.0" encoding="utf-8"?>
                                            <!-- http://blog.flexexamples.com/2008/01/30/copying-text-to-the-operating-system-clipboard-in- flex/ -->
                                            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                                    layout="vertical"
                                                    verticalAlign="middle"
                                                    backgroundColor="white">

                                                <mx:Script>
                                                    <![CDATA[
                                                        import mx.controls.Alert;

                                                        private function button_click():void {
                                                            System.setClipboard(richTextEditor.text);
                                                            Alert.show("Done");
                                                        }
                                                    ]]>
                                                </mx:Script>

                                                <mx:ApplicationControlBar dock="true">
                                                    <mx:Button id="button"
                                                            label="Copy text to clipboard"
                                                            toolTip="Click here to copy the contents of the RichTextEditor control to the OS clipboard."
                                                            click="button_click();" />
                                                </mx:ApplicationControlBar>

                                                <mx:RichTextEditor id="richTextEditor"
                                                        text="The quick brown fox jumped over the lazy dog."
                                                        width="100%"
                                                        height="100%" />

                                            </mx:Application>

                                            • 19. Re: Highlight all Textarea text
                                              GordonSmith Level 4

                                              The TextField inside the TextArea has a property called alwaysShowSelection. If true, it will show the selection hiliting even if the component doesn't have the keyboard focus.

                                               

                                              Gordon Smith

                                              Adobe Flex SDK Team