Safari TextArea Bug
So for the record, if you have a textarea in Safari that is set to display: none; You can't set it's content via JavaScript unless you show it first. So:
edCanvas.style.display = "inline"; edCanvas.innerText = body; edCanvas.style.display = "none";
Really annoying. For those Ephox people using the latest version of our EditLive! WordPress plugin in Safari, that's where your content went. Pull an update from subversion soon and the issue should be fixed.
Correction. That should be edCanvas.innerText = body not edCanvase.value = body. If you set the value it still has problems. Also Andy reports in comments that a timeout might be needed - I have a shiny new MacBook Pro so mines fast enough to not need it. :)
May 19th, 2007 at 2:52 pm
actually Doug discovered that while testing the new 6.2 features, and the above code doesn’t fix it in all cases; on slower machines you need to set the value in a setTimeout() or it still doesn’t work!
May 22nd, 2007 at 12:05 pm
Isn’t the better solution to have a hidden input field that you write this value to? In the logic where you show the textarea (i.e. set its display:whatever) you can just set its innerHTML to the value of the hidden field.
May 22nd, 2007 at 12:22 pm
Stephen,
It depends on how much control over the site you have, sometimes your a component in a bigger site. Also, Doug, one of our engineers, reports that setting the innerText works even if you don’t change the display value before hand which makes it a pretty neat solution.
November 9th, 2007 at 1:21 pm
Thought anyone else looking for a solution may want to see some production code. You’ll have to imagine some as this code is really proprietary (sorry, just copied and pasted) but, you can at least get an idea.
The innerText suggestion mentioned above I found to be hit or miss when dealing with compatibility across the board (ie, ff, opera, etc.) whereas the following deals with Safari exclusively while leaving all of the natural code alone for EVERYTHING else to consume.
This should really be cleaned up and thrown into a utilities class function but I’m only using it for a very specific instance so I just didn’t take the time. In the following, “elEmbed” is the textarea and “sEmbed” is the value we’re looking to set. Feel free to drop me a line at sdesapio @ NO_SPAM bulletware.com to discuss.
//safari brain damage control…
if (g_sUserAgent.indexOf(’safari’) != -1){
//get ref to the “set” containing the field
var elParentNode = elEmbed.parentNode;
while (!g_oYuiDom.hasClass(elParentNode, ‘fcs’)){
elParentNode = elParentNode.parentNode;
}
//set the value and reset css vals
var setEmbedValue = function(){
//set field value
elEmbed.value = sEmbed;
//reset css
g_oYuiDom.setStyle(elParentNode, ‘display’, ‘none’);
g_oYuiDom.setStyle(elParentNode, ‘visibility’, ‘visible’);
}
//hide visibility first to avoid flashing in UI
g_oYuiDom.setStyle(elParentNode, ‘visibility’, ‘hidden’);
//show it (will not be visible but will be tangible)
g_oYuiDom.setStyle(elParentNode, ‘display’, ‘block’);
//must have a fraction of a second to populate the field
setTimeout(setEmbedValue, 50);
}
//every other browser…
else{
elEmbed.value = sEmbed;
}
September 1st, 2008 at 1:06 pm
Interestingly setting the innerText doesn’t work so well, as it will go through the browsers dom thingymebob causing the html to be manipulated (say removing whitespace in pre-tags). In the latest Safari setting the value directly works well.