Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
​
<html lang="en">
<head>
    <title>Internet Explorer and the Undo Buffer</title>
    <style type="text/css">
        body {
            font-family: sans-serif;
        }
    </style>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript">
        YAHOO.util.Event.onDOMReady(function() {
            var Dom = YAHOO.util.Dom;
            var Event = YAHOO.util.Event;
        
            Event.on('el-b', 'keypress', function(e) {
                var el = document.createElement('p');
                document.body.appendChild(el);
                document.body.removeChild(el);
            });
            
            var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
            
            Event.on('el-c', 'keypress', function(e) {
                var index = Math.floor(Math.random() * colors.length);
                Dom.setStyle(Event.getTarget(e), 'color', colors[index]);
            });
        });
    </script>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>A</td>
                <td>
                    <textarea id="el-a" cols="40" rows="6"></textarea>
                </td>
            </tr>
            <tr>
                <td>B</td>
                <td>
                    <textarea id="el-b" cols="40" rows="6"></textarea>
                </td>
            </tr>
            <tr>
                <td>C</td>
                <td>
                    <textarea id="el-c" cols="40" rows="6"></textarea>
                </td>
            </tr>
        </tbody>
    </table>
    <p>
        This page demonstrates the effect of changing the DOM on Internet Explorer's undo buffer. This error does not seem to be well documented, <a href="http://www.codeproject.com/KB/scripting/htmlarea.aspx#bugs1">the only mention I could find of the issue</a> was documented as part of Fraser Cain's htmlArea control. 
    </p>
    <p>
        You need to view this page with Internet Explorer (6 - 8) to observe the error.
    </p>
    <p>
        <strong>A</strong> is a standard textarea control. This control demonstrates how the undo buffer normally behaves.
    </p>
    <p>
        <strong>B</strong> has a keypress listener that adds, then removes, an element from the DOM. This demonstrates IE's undo buffer resetting.
    </p>
    <p>
        <strong>C</strong> also has  a keypress listener, but in this case the listener only changes the colour of the text in the element. This demonstrates that only certain operations reset the undo buffer.
    </p>
    <p>
        With each of the textareas above try entering some text then invoking undo. <strong>A</strong> and <strong>C</strong> should behave identically, <strong>B</strong> should behave in a non-standard way.
    </p>
</body>
</html>
​
 
body {
  background:orange;
}
 
if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers