如何获取输入控件中输入的文本的动态宽度答案

【问题标题】：how do i get dynamic width of text entered in input control如何获取输入控件中输入的文本的动态宽度
【发布时间】：2014-07-28 09:23:34
【问题描述】：

here i need the text width according to font size and font width of input text control and it should calculate the dynamic width of the entered text.  
i have tried with the following code but it is not getting updated for the text width.

第一次对于任何字体大小，它将给出适当的文本宽度。达到文本宽度 350 后，我需要减小字体大小，此时文本宽度没有得到更新。反之亦然。请分享它的答案。

  protected function init(event:FlexEvent):void
                {
                    cmpTextLabel.inputComponent.addEventListener(Event.CHANGE, handleInputComponentChange);
                }


    private function handleInputComponentChange(e:Event):void
                {
                    var tm:TextLineMetrics = cmpTextLabel.measureText(cmpTextLabel.text);

            var txtWidth:int =tm.width; 
                                    cmpTextLabel.maxWidth=cmpTextLabel.width;
                    cmpTextLabel.maxHeight=cmpTextLabel.height;

                    if(txtWidth>350)
                    {
                        var i:int=TemplateModel.getInstance().getFontSizeIndexFromDictionary(cmpTextLabel.compFontSize);

                        i=i-1;
                        if(i>=0)
                            cmpTextLabel.compFontSize=TemplateModel.getInstance().getFontSizeFromDictionary(i);
                        else
                            cmpTextLabel.compFontSize=TemplateModel.getInstance().getFontSizeFromDictionary(0);
                    }
                    if(txtWidth<350 && cmpTextLabel.compFontSize<24)
                    {
                        var j:int=TemplateModel.getInstance().getFontSizeIndexFromDictionary(cmpTextLabel.compFontSize);
                        j=j+1;
                        cmpTextLabel.compFontSize=TemplateModel.getInstance().getFontSizeFromDictionary(j);
                    } 

    <singlelinetext:CmpSLTruncateLabel id="cmpTextLabel"  skinClass="com.presentation.components.home.templates.comps.singlelinetext.SkinSLTruncateLabel"
                                  width="{dataModel.width}" height="{dataModel.height}" useHandCursor="false" buttonMode="false"/>

【问题讨论】：

标签： actionscript-3

【解决方案1】：

在本例中，inputComponent 的宽度取决于 labelComponent 的文本宽度。

<fx:Script><![CDATA[
    import mx.events.FlexEvent;

    import spark.events.TextOperationEvent;

    [Bindable]
    private var tm:TextLineMetrics;

    private function labelComponent_changeHandler(event:TextOperationEvent):void {
        tm = labelComponent.measureText(labelComponent.text);
    }

    private function creationCompleteHandler(event:FlexEvent):void {
        tm = labelComponent.measureText(labelComponent.text);
    }
    ]]></fx:Script>

<s:HGroup>
    <s:TextInput id="labelComponent"
                 text="Hello world"
                 fontSize="15" fontFamily="Arial"
                 change="labelComponent_changeHandler(event)"/>
    <s:TextInput id="inputComponent"
                 borderVisible="true"
                 width="{tm.width}" focusSkin="{null}"
                 contentBackgroundColor="0xffffff"
                 fontSize="15" fontFamily="Arial"/>
</s:HGroup>

【讨论】：