jackbrown · August 21, 2014 01:14
diff --git a/index b/index
 <!doctype html>
 <html>
 <head>
    <title>Placeholders for IE&lt;10</title>

    <style>
        div.row {
            clear: both;
            float: left;
        }
    </style>
 </head>
 <body>

    <h1>Placeholders for IE&lt;10</h1>

    <p>Adds placeholder support for IE without affecting placeholders in modern browsers.</p>
    <p>Completely standalone, no need for jQuery.</p>
    <p>Click the inputs to see the placeholders in action!</p>
    <form action="">
        <div class="row">
            <input type="text" class="iePlacehold" placeholder="I'm a text field!">
        </div>
        <div class="row">
            <input type="password" class="iePlacehold" id="password" placeholder="I'm a password field!">
            <input type="text" class="iePlacehold" style="display:none;" placeholder="I'm a password field!" id="fakePassword">
        </div>
    </form>

    <script type="text/javascript">
        /**
         * Check if a browser is IE and return the version number
         *
         * Taken from http://stackoverflow.com/a/19999868/487094
         *
         * @return {bool|string}
         */
        function msieversion() {
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf("MSIE ");

            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
                // If Internet Explorer, return version number
                return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)));
            }

            return false;
        }

        /**
         * Add placeholder support for browsers that don't have HTML5 placeholder.
         *
         * Works for IE8+9, also works for password fields.
         */
        window.onload = function () {
            var isIE = msieversion();

            // only run in IE8+9
            if(isIE && isIE < 10) {
                var fields = document.querySelectorAll('.iePlacehold'),
                        passwordId = 'password',
                        fakePasswordId = 'fakePassword';

                for (var i = 0; i < fields.length; i++) {
                    var field = fields[i];

                    // set the default values
                    field.value = field.getAttribute('placeholder');

                    // hide the real password field
                    if(field.getAttribute('id') === passwordId) {
                        field.style.display = 'none';
                    }

                    // show the fake password field
                    if(field.getAttribute('id') === fakePasswordId) {
                        field.style.display = 'block';
                    }

                    // set event listeners
                    /**
                     * IE won't display placeholders in a password field.
                     * We have a fake password field above the normal one that displays the default text.
                     *
                     * When user focuses on the fake one, we hide the fake field, show the real one and
                     * set focus on the real one. The reverse happens on blur if the user hasn't entered
                     * a value.
                     */
                    field.onfocus = function () {
                        var placeholder = this.getAttribute('placeholder'),
                                value = this.value;

                        // swap the real and fake inputs for the password field
                        if(this.getAttribute('id') === fakePasswordId) {
                            var passwordField = document.getElementById(passwordId);
                            this.style.display = 'none';

                            passwordField.style.display = 'block';
                            passwordField.focus();
                        }

                        if(placeholder === value) {
                            this.value = '';
                        }
                    }

                    field.onblur = function () {
                        var placeholder = this.getAttribute('placeholder'),
                                value = this.value;

                        // put the placeholder back in place if the user didn't enter anything
                        if(value === '') {
                            // show the fake input for passwords
                            if(this.getAttribute('id') === passwordId) {
                                var fakeField = document.getElementById(fakePasswordId);
                                this.style.display = 'none';
                                fakeField.style.display = 'block';
                            }

                            this.value = placeholder;
                        }
                    }
                }
            } else {
                // remove the fake input for non IE as it is not required
                document.getElementById(fakePasswordId).remove();
            }

        }
    </script>

 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Placeholders for IE<10</title>

	<style>
	div.row {
	clear: both;
	float: left;
	}
	</style>
	</head>
	<body>

	<h1>Placeholders for IE<10</h1>

	<p>Adds placeholder support for IE without affecting placeholders in modern browsers.</p>
	<p>Completely standalone, no need for jQuery.</p>
	<p>Click the inputs to see the placeholders in action!</p>
	<form action="">
	<div class="row">
	<input type="text" class="iePlacehold" placeholder="I'm a text field!">
	</div>
	<div class="row">
	<input type="password" class="iePlacehold" id="password" placeholder="I'm a password field!">
	<input type="text" class="iePlacehold" style="display:none;" placeholder="I'm a password field!" id="fakePassword">
	</div>
	</form>

	<script type="text/javascript">
	/**
	* Check if a browser is IE and return the version number
	*
	* Taken from http://stackoverflow.com/a/19999868/487094
	*
	* @return {bool\|string}
	*/
	function msieversion() {
	var ua = window.navigator.userAgent;
	var msie = ua.indexOf("MSIE ");

	if (msie > 0 \|\| !!navigator.userAgent.match(/Trident.*rv\:11\./)){
	// If Internet Explorer, return version number
	return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)));
	}

	return false;
	}

	/**
	* Add placeholder support for browsers that don't have HTML5 placeholder.
	*
	* Works for IE8+9, also works for password fields.
	*/
	window.onload = function () {
	var isIE = msieversion();

	// only run in IE8+9
	if(isIE && isIE < 10) {
	var fields = document.querySelectorAll('.iePlacehold'),
	passwordId = 'password',
	fakePasswordId = 'fakePassword';

	for (var i = 0; i < fields.length; i++) {
	var field = fields[i];

	// set the default values
	field.value = field.getAttribute('placeholder');

	// hide the real password field
	if(field.getAttribute('id') === passwordId) {
	field.style.display = 'none';
	}

	// show the fake password field
	if(field.getAttribute('id') === fakePasswordId) {
	field.style.display = 'block';
	}

	// set event listeners
	/**
	* IE won't display placeholders in a password field.
	* We have a fake password field above the normal one that displays the default text.
	*
	* When user focuses on the fake one, we hide the fake field, show the real one and
	* set focus on the real one. The reverse happens on blur if the user hasn't entered
	* a value.
	*/
	field.onfocus = function () {
	var placeholder = this.getAttribute('placeholder'),
	value = this.value;

	// swap the real and fake inputs for the password field
	if(this.getAttribute('id') === fakePasswordId) {
	var passwordField = document.getElementById(passwordId);
	this.style.display = 'none';

	passwordField.style.display = 'block';
	passwordField.focus();
	}

	if(placeholder === value) {
	this.value = '';
	}
	}

	field.onblur = function () {
	var placeholder = this.getAttribute('placeholder'),
	value = this.value;

	// put the placeholder back in place if the user didn't enter anything
	if(value === '') {
	// show the fake input for passwords
	if(this.getAttribute('id') === passwordId) {
	var fakeField = document.getElementById(fakePasswordId);
	this.style.display = 'none';
	fakeField.style.display = 'block';
	}

	this.value = placeholder;
	}
	}
	}
	} else {
	// remove the fake input for non IE as it is not required
	document.getElementById(fakePasswordId).remove();
	}

	}
	</script>

	</body>
	</html>