The following code works in Firefox 3.6, but not in Internet Explorer 8:
<html>
<head>
<title>Example</title>
<script type="text/javascript">
function init() {
alert(document.designMode);
document.designMode = "on";
alert(document.designMode);
}
</script>
</head>
<body onload="init()">
</body>
</html>
In FF the alerts show 'off', then 'on'; in IE they're both 'Off'.
What am I doing wrong?
The Internet Explorer documentation seems to indicate that the designMode property is case-sensitive, and needs to be set to "On", not "on".
You may have better luck with the contentEditable attribute in IE, though designMode is the standard.
Even though this won't change what the alerts show, it will turn on an editable mode in IE:
<html>
<head>
<title>Example</title>
<script type="text/javascript">
function init() {
alert(document.designMode);
document.designMode = "On";
document.body.contentEditable = 'true';
alert(document.designMode);
}
</script>
</head>
<body onload="init()">
</body>
</html>
You can test by placing some dummy content in the page body (like <p>Test</p>) and loading in both FF and IE. It's a suitable workaround for at least IE8.