Number of lines in a Field of type Text with Javascript

[Karl_Sigiscar_1]

Hi,

I have a form where I need to dynamically retrieve the number of lines in a Field of type Text.

When I use getField(), I'm returned an object of type Field. I can see such properties as rect, but nothing concerning the number of lines of text in the field.

Any idea (other than getting the Field height and dividing that by the height of a line) ?

Regards,
Karl.

[Former Community Member · Accepted solution]

The number of lines is not a property that is exposed for a field (I have never seen this request before). Are you talking about finding the number of lines of an empty field or one that has data in it (i.e. I need to know how much data the user has entered)?

Maybe if you describe your use case we might be able to come up with better ideas to solve it.

Paul

[Karl_Sigiscar_1]

Hi Paul,

My use case is the following:

Users enter text in a Flex application that then genereate a PDF report using their entry.

In order to limit the amount of text entered in Flex, we need to know from the PDF the number of lines of each Text Field in the report, and also their width and height. Right now, this is maintained statically. Using PDFObject, we want to dynamically embed the PDF template (it can be one of fifteen) into the same HTML page that embeds the Flex application. Then, the Flex application and the PDF can communicate using the Flex ExternalInterface and the PDF hostContainer's postMessage(). Right now, the only thing we cannot figure out is how to dynamically get the number of lines in a Text Field without knowing what a line height is.

The PDF remains invisible. It is only there to get information from it for initialization of the Flex application. When the users submit their data, the actual PDF report is generated from the data and the template.

Best regards,
Karl.

[Former Community Member]

The best you will ever do is an approximation. There are too many variables in the equation (the user can hit an enter key and have only a portion of a line). Would it not make more sense to allow the user to enter as much info into the flex app that they want then allow the PDF report to flow (grow) to fit the amount of data?

Paul

[Karl_Sigiscar_1]

Yes, we thought about using Subforms with a flow layout. But the extra parameter we have is that you can have 4 Text Fields in the report. The total number of lines in the report is limited (e.g 40 lines for the whole report). If you enter a lot of text in a given Text Field, it will limit the other Text Fields available lines for text entry. This is because the report has to fit on one page. Otherwise, it would flow out of the page.

[Former Community Member]

Then I do not see that you have much choice but to use an estimate calculation....similar to what you described earlier. I do suggest that you set the text size of the value proprty to 0 and limit length to visible area. This will allow the font to shrink automatically when you put the data into the field. That way you will not end up with scroll bars if there is a little bit too much data.

Paul

[Karl_Sigiscar_1]

OK. Thanks Paul.

[Former Community Member]

Hi,

You can use below function to calculate the no of lines in the Text field dynamically.

import mx.controls.textClasses.TextRange;
    import flash.text.TextField;
   
    private function calculateNoOfLines():int
    {  
      var tr2:TextRange = new TextRange(_text, true, 0,_text.text.length-1);
      tr2.text = _text.text;
     
      _text.invalidateSize();
      _text.invalidateDisplayList();
      _text.invalidateProperties();
     
      var contentTextField:TextField = _text.mx_internal::getTextField();                           
              var nLines:int = contentTextField.numLines;
                            
              var lineMetrics:TextLineMetrics = _text.getLineMetrics(0);
              // This is to calculate the total text height
              var _textHeight:Number = lineMetrics.height * nLines;
          
     return nLines;    
    }

Call the above function in the KeyUp event of the Text field.

Here in the above field _text is the Text field.

<mx:Text id="_text" />

If this post answers your question or helps, please kindly mark it as such.

Thanks,

Bhasker Chari