The blog of dlaa.me

Too liberal a definition of "input" [Raising awareness of a quirk of the input event for text elements with a placeholder on Internet Explorer]

I tracked down a strange problem in a web app recently that turned out to be the result of a browser bug. I wasted some time because searching for info wasn't all that helpful and I wanted to blog the details so I could save someone else a bit of trouble.

The scenario is simple; this application deals with private information and wants to log the user out after a period of inactivity. It does so by listening to the input event of its text boxes and resetting an inactivity timer whenever the user types. (There's similar handling for button clicks, etc..) If the inactivity timer ever fires, the user gets logged out. Because the freshly-loaded application has no private data, there's no need to start the inactivity timer until after the first user input.

This behavior is pretty straightforward and the initial implementation worked as intended. But there was a problem on Internet Explorer (versions 10 and 11): a newly-loaded instance of the app would reload itself even without any input! What turned out to be the issue was that an input element with its placeholder attribute set also had its autofocus attribute set and when IE set focus to that element, it triggered the input event! The app (wrongly) believed the user had interacted with it and started its inactivity timer.

Fortunately, this is not catastrophic because the app fails securely (though more by chance than design). But it's still annoying and a bit of a nuisance...

Trying to detect and ignore the bogus first interaction on a single browser seemed dodgy, so I went with a call to setTimeout to clear the inactivity timer immediately after load on all browsers. Sometimes, this is harmlessly unnecessary; on IE, it undoes the effect of the bogus input event and achieves the desired behavior.

Depending on your scenario, a different approach might be better - the biggest challenge is understanding what's going on in the first place! :)

Notes:

  • The Internet Explorer team is aware of and acknowledges the issue - you can track its status here

  • I created a simple demonstration:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Input event behavior for text elements with/out a placeholder</title>
</head>
<body>
    <!-- Text boxes with/without placeholder text -->
    <input id="without" type="text"/>
    <input id="with" type="text" placeholder="Placeholder" autofocus="autofocus"/>

    <!-- Reference jQuery for convenience -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

    <script>
        // Helper function for logging
        function log(message) {
            $("body").append($("<div>" + message + "</div>"));
        }

        // Handler for the input event
        function onInput(evt) {
            log("input event for element '" + evt.target.id + "', value='" + evt.target.value + "'");
        }

        // Attach input handler to all input elements
        $("input").on("input", onInput);

        // Provide brief context
        log("&nbsp;");
        log("Click in and out of both text boxes to test your browser.");
        log("If you see an input event immediately on load, that's a bug.");
        log("&nbsp;");
    </script>
</body>
</html>
Tags: Technical Web