{"id":336,"date":"2011-05-29T13:20:22","date_gmt":"2011-05-29T12:20:22","guid":{"rendered":"https:\/\/greladesign.co\/blog\/?p=336"},"modified":"2012-11-01T21:54:04","modified_gmt":"2012-11-01T21:54:04","slug":"textfield-stylesheet-and-problems-with-bold-italic-and-underline-tags","status":"publish","type":"post","link":"https:\/\/greladesign.co\/blog\/2011\/05\/29\/textfield-stylesheet-and-problems-with-bold-italic-and-underline-tags\/","title":{"rendered":"[Resolved] TextField, StyleSheet and problems with bold, italic and underline tags."},"content":{"rendered":"

Hi,
\nI’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:
\n
\nTwo 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.<\/p>\n

Here is a sample code:<\/p>\n

\r\n\t\t\/**\r\n\t\t * Begin of the application, create textfields, position and register listeners\r\n\t\t *\/\r\n\t\tprotected function run():void\r\n\t\t{\r\n\t\t\tm_oInput = textfieldFactory("", 320, 240, true);\r\n\t\t\tm_oHtmlOutput = textfieldFactory("", 320, 240, false);\r\n\t\t\tm_oDebug = textfieldFactory("", 320, 512, false);\r\n\r\n\t\t\tm_oLabelInput = textfieldFactory("Input", 320, 22,false,false);\r\n\t\t\tm_oLabelOutput = textfieldFactory("Html Ouput", 320, 22,false,false);\r\n\t\t\tm_oLabelDebug = textfieldFactory("text property output", 320, 22,false,false);\r\n\r\n\t\t\tm_oLabelInput.x = 10;\r\n\t\t\tm_oLabelInput.y = 10;\r\n\t\t\tm_oInput.x = m_oLabelInput.x;\r\n\t\t\tm_oInput.y = m_oLabelInput.y+m_oLabelInput.height;\r\n\r\n\t\t\tm_oLabelOutput.x = 10;\r\n\t\t\tm_oLabelOutput.y = 10 + 22 + 240 + 10;\r\n\t\t\tm_oHtmlOutput.x = m_oLabelOutput.x;\r\n\t\t\tm_oHtmlOutput.y = m_oLabelOutput.y+m_oLabelOutput.height;\r\n\r\n\t\t\tm_oLabelDebug.x = 10 + 320 + 10;\r\n\t\t\tm_oLabelDebug.y = 10;\r\n\t\t\tm_oDebug.x = m_oLabelDebug.x;\r\n\t\t\tm_oDebug.y = m_oLabelDebug.y+m_oLabelDebug.height;\r\n\r\n\t\t\tm_oInput.addEventListener(Event.CHANGE, onInputChanged, false, 0, true);\r\n\r\n\t\t\taddChild(m_oLabelInput);\r\n\t\t\taddChild(m_oLabelOutput);\r\n\t\t\taddChild(m_oLabelDebug);\r\n\t\t\taddChild(m_oInput);\r\n\t\t\taddChild(m_oHtmlOutput);\r\n\t\t\taddChild(m_oDebug);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Helper function to create a textfield\r\n\t\t * @param\tp_sLabel text to be applied\r\n\t\t * @param\tp_nWidth width of textfield\r\n\t\t * @param\tp_nHeight height of textfield\r\n\t\t * @param\tp_bInput if true then it is TextFieldType.INPUT\r\n\t\t * @param\tp_bBorder if true then border around textfield is displayed\r\n\t\t * @return\r\n\t\t *\/\r\n\t\tprotected function textfieldFactory(p_sLabel:String, p_nWidth:Number, p_nHeight:Number, p_bInput:Boolean = false, p_bBorder:Boolean=true):TextField\r\n\t\t{\r\n\t\t\tvar tf:TextField = new TextField();\r\n\t\t\t\ttf.multiline = tf.wordWrap = true;\r\n\t\t\t\ttf.type = p_bInput ? TextFieldType.INPUT:TextFieldType.DYNAMIC;\r\n\t\t\t\ttf.width = p_nWidth;\r\n\t\t\t\ttf.height = p_nHeight;\r\n\t\t\t\ttf.border = p_bBorder;\r\n\t\t\t\ttf.text = p_sLabel;\r\n\r\n\t\t\treturn tf;\r\n\t\t}\r\n\r\n\t\t\/**\r\n\t\t * Input field CHANGE handler, here we are updating output fields.\r\n\t\t * @param\te\r\n\t\t *\/\r\n\t\tprotected function onInputChanged(e:Event):void\r\n\t\t{\r\n\t\t\te.stopImmediatePropagation();\r\n\t\t\tm_oHtmlOutput.htmlText = m_oInput.text;\r\n\t\t\tm_oDebug.text = m_oHtmlOutput.htmlText;\r\n\t\t}\r\n\r\n<\/pre>\n
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:)<\/p>\n
and here you can play with:
\n[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”]<\/p>\n
\"Get<\/a><\/p>\n
[\/kml_flashembed]<\/p>\n
stylesheet may help if we specify resetting values for paragraph:<\/p>\n
some class members to store stylesheet object and css string<\/p>\n
\r\n\t\tprotected var style:StyleSheet;\r\n\t\tprotected var cssString:String;\r\n<\/pre>\n
add following to the run method:<\/p>\n
\r\n\r\n\t\t\tcssString = "p {font-weight:normal; font-style:normal; font-style:normal; text-decoration:normal; font-family:Arial;}";\r\n\t\t\tstyle = new StyleSheet();\r\n\t\t\t\tstyle.parseCSS(cssString);\r\n<\/pre>\n
and update the Event.CHANGE handler:<\/p>\n
\r\n\r\n\t\t\/**\r\n\t\t * Input field CHANGE handler, here we are updating output fields.\r\n\t\t * @param\te\r\n\t\t *\/\r\n\t\tprotected function onInputChanged(e:Event):void\r\n\t\t{\r\n\t\t\te.stopImmediatePropagation();\r\n\t\t\tm_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.\r\n\t\t\tm_oHtmlOutput.htmlText = m_oInput.text;\r\n\r\n\t\t\tm_oDebug.text = m_oHtmlOutput.htmlText;\r\n\r\n\t\t\tm_oHtmlOutput.styleSheet = style;\/\/apply again\r\n\t\t\tm_oHtmlOutput.htmlText = m_oInput.text;\r\n\t\t}\r\n<\/pre>\n
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:<\/p>\n
[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”]<\/p>\n
\"Get<\/a><\/p>\n
[\/kml_flashembed]<\/p>\n
if you know the resolution please let me know:)<\/p>\n
Edit:
\nI have logged this as a BUG, if you want to see and\/or vote then click here<\/a>.<\/p>\n
Edit:
\nI 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:<\/p>\n
\r\n\r\nm_oHtmlOutput.htmlText = m_oInput.text + "<p>";\/\/add opening p tag\r\nm_oHtmlOutput.htmlText = m_oInput.text;\/\/restore unchanged value\r\n\r\n<\/pre>\n
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.<\/p>\n
[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”]<\/p>\n
\"Get<\/a><\/p>\n
[\/kml_flashembed]<\/p>\n
Happy Coding.<\/p>\n","protected":false},"excerpt":{"rendered":"
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:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":""},"categories":[17,72,9],"tags":[12,110,94,73,93],"_links":{"self":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/336"}],"collection":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/comments?post=336"}],"version-history":[{"count":20,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/336\/revisions"}],"predecessor-version":[{"id":403,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/336\/revisions\/403"}],"wp:attachment":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/media?parent=336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/categories?post=336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/tags?post=336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}