Fallback to handle placeholder for IE 9 and below

placeholder.js

(function () {

    'use strict';

    var Placeholder = function (element) {
        this.field = element;
        this.password = (this.field.attr('type') === 'password');
        this.placeholder = this.field.attr('placeholder');
        this.init();
    };

    Placeholder.prototype = {
        init: function () {
            this.field.on('blur focus', this.handleEvent.bind(this));
            this.field.val(this.placeholder).addClass('placeholder');
            if (this.password) {
                this.field.attr('type', 'text');
            }
        },
        handleEvent: function (event) {
            var value = this.field.val();
            if (event.type === 'blur') {
                this.onBlur(value);
            } else
            if (event.type === 'focus') {
                this.onFocus(value);
            } else {
                console.log('Placeholder: event unknown');
            }
        },
        onBlur: function (value) {
            if (value === '') {
                this.field.val(this.placeholder).addClass('placeholder');
            }
        },
        onFocus: function (value) {
            if (value === this.placeholder) {
                this.field.val('').removeClass('placeholder');
            }
            if (this.password) {
                this.field.attr('type', 'password');
            }
        },
        destroy: function() {
            this.field.off('blur focus');
        }
    };
    
    $('input[type="email"], input[type="password"], input[type="text"], textarea').each(function () {
        new app.Doughnut($(this));
    });

})();

placeholder.mixin.scss

@mixin placeholder {
    &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
}