JSFiddle - React, Tailwind, and code Playground

by BuriB

HTML

<head>
    <title>on Paste Experiment</title>
</head>
<body>
     <h1>on paste event experiment</h1>
    <br />
    <input type="text" size="40" placeholder="listening for paste event" id="elem1"/>
    <br /><br />
    <textarea type="text" cols="40" placeholder="listening for paste event"id="elem2"></textarea>
    <br /><br />
    <div id="results"></div>
    <script>
        window.onload = function() {
            var inp = document.getElementById('elem1'),
                area = document.getElementById('elem2'),
                results = document.getElementById('results'),
                pasteHandler = function(event) {
                    results.innerHTML = '';
                    results.innerHTML += '<strong style="color:green">event.type: </strong> ' + event.type +  ' ' + ( new Date().getMilliseconds() ) + '<br/>';
                };

            (function() {
                // all browsers except IE before version 9
                if (inp.addEventListener) {
                    inp.addEventListener('paste', pasteHandler);
                    area.addEventListener('paste', pasteHandler);
                } else {
                    // IE before version 9
                    if (inp.attachEvent) {
                        inp.attachEvent('paste', pasteHandler);
                        area.attachEvent('paste', pasteHandler);
                    } else {
                        results.innerHTML = '<strong style="color:red">there was a problem with event listener creation.</strong>';
                    }
                };
            })();
        }
    </script>
</body>