Hi,
I’ve found a problem with a TextField rendering HTML tags. The problem manifests itself with bold, italic and underline style being applied to whole text soon after respective closing tag is somehow malformed. Here is the scenario:
Two textfields on stage, one is the input and second is the html output. When input field is changed then output’s htmlText property is updated. Then start to type some HTML text and see results, as soon as you type closing tag of bold, italic or underline, the style is applied to whole text, and you can’t get rid of it.
Here is a sample code:
/**
* Begin of the application, create textfields, position and register listeners
*/
protected function run():void
{
m_oInput = textfieldFactory("", 320, 240, true);
m_oHtmlOutput = textfieldFactory("", 320, 240, false);
m_oDebug = textfieldFactory("", 320, 512, false);
m_oLabelInput = textfieldFactory("Input", 320, 22,false,false);
m_oLabelOutput = textfieldFactory("Html Ouput", 320, 22,false,false);
m_oLabelDebug = textfieldFactory("text property output", 320, 22,false,false);
m_oLabelInput.x = 10;
m_oLabelInput.y = 10;
m_oInput.x = m_oLabelInput.x;
m_oInput.y = m_oLabelInput.y+m_oLabelInput.height;
m_oLabelOutput.x = 10;
m_oLabelOutput.y = 10 + 22 + 240 + 10;
m_oHtmlOutput.x = m_oLabelOutput.x;
m_oHtmlOutput.y = m_oLabelOutput.y+m_oLabelOutput.height;
m_oLabelDebug.x = 10 + 320 + 10;
m_oLabelDebug.y = 10;
m_oDebug.x = m_oLabelDebug.x;
m_oDebug.y = m_oLabelDebug.y+m_oLabelDebug.height;
m_oInput.addEventListener(Event.CHANGE, onInputChanged, false, 0, true);
addChild(m_oLabelInput);
addChild(m_oLabelOutput);
addChild(m_oLabelDebug);
addChild(m_oInput);
addChild(m_oHtmlOutput);
addChild(m_oDebug);
}
/**
* Helper function to create a textfield
* @param p_sLabel text to be applied
* @param p_nWidth width of textfield
* @param p_nHeight height of textfield
* @param p_bInput if true then it is TextFieldType.INPUT
* @param p_bBorder if true then border around textfield is displayed
* @return
*/
protected function textfieldFactory(p_sLabel:String, p_nWidth:Number, p_nHeight:Number, p_bInput:Boolean = false, p_bBorder:Boolean=true):TextField
{
var tf:TextField = new TextField();
tf.multiline = tf.wordWrap = true;
tf.type = p_bInput ? TextFieldType.INPUT:TextFieldType.DYNAMIC;
tf.width = p_nWidth;
tf.height = p_nHeight;
tf.border = p_bBorder;
tf.text = p_sLabel;
return tf;
}
/**
* Input field CHANGE handler, here we are updating output fields.
* @param e
*/
protected function onInputChanged(e:Event):void
{
e.stopImmediatePropagation();
m_oHtmlOutput.htmlText = m_oInput.text;
m_oDebug.text = m_oHtmlOutput.htmlText;
}
once “broken” there is no way to fix the formatting of the textfield. You could think that using stylesheets makes a difference, but not, well not entirely:)
and here you can play with:
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://greladesign.co/blog/wp-content/uploads/2011/05/textfield_bug1.swf” width=”590″ height=”555″ targetclass=”flashmovie”]
[/kml_flashembed]
stylesheet may help if we specify resetting values for paragraph:
some class members to store stylesheet object and css string
protected var style:StyleSheet; protected var cssString:String;
add following to the run method:
cssString = "p {font-weight:normal; font-style:normal; font-style:normal; text-decoration:normal; font-family:Arial;}";
style = new StyleSheet();
style.parseCSS(cssString);
and update the Event.CHANGE handler:
/**
* Input field CHANGE handler, here we are updating output fields.
* @param e
*/
protected function onInputChanged(e:Event):void
{
e.stopImmediatePropagation();
m_oHtmlOutput.styleSheet = null;//we are clearing style so the htmlText will return the "internal" html format of the text, if we do not do that then in debug text field we will see exact copy of the input.
m_oHtmlOutput.htmlText = m_oInput.text;
m_oDebug.text = m_oHtmlOutput.htmlText;
m_oHtmlOutput.styleSheet = style;//apply again
m_oHtmlOutput.htmlText = m_oInput.text;
}
after those changes we have fixed issue for the P tag. Unfortunately if you do not use P tag then the problem persists. Try it now:
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://greladesign.co/blog/wp-content/uploads/2011/05/textfield_bug2.swf” width=”590″ height=”555″ targetclass=”flashmovie”]
[/kml_flashembed]
if you know the resolution please let me know:)
Edit:
I have logged this as a BUG, if you want to see and/or vote then click here.
Edit:
I have managed to find working solution, it will still spill the style when tag is invalid but once valid it will render as expected. The solution is to do as follows:
m_oHtmlOutput.htmlText = m_oInput.text + "<p>";//add opening p tag m_oHtmlOutput.htmlText = m_oInput.text;//restore unchanged value
I don’t know mechanics behind this but it seems to reset the style and textfield renders OK, try to break the bold tag then fix it, see that it now restores correct style after fixing the tag. Tested on FP11.2.202.233 and FP11.1.102.55.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://greladesign.co/blog/wp-content/uploads/2011/05/textfield_bug_fixed.swf” width=”470″ height=”260″ targetclass=”flashmovie”]
[/kml_flashembed]
Happy Coding.