How to Support IE9 Input Placeholder for Angular.js

Table of Contents

1. First, i add the above angular placeholder.js to my html.
2. app.js, at my app.js I add taiPlaceholder

IE9 doesn't support placeholder and I didn't want to imprement my own, so trying to find if there's one already. So I found following..

angular-placeholder.js

I tried to put to my angular app.

First, i add the above angular placeholder.js to my html.

app.js, at my app.js I add taiPlaceholder

var myApp = angular.module('app', ['ngRoute', 'taiPlaceholder']);

That's it, my html at IE9 could see the placeholder now, i didn't check the placeholder.js logic detail but, sometime so lazy just hope plugin library will be just work.

Later, I noticed when form post at IE9, each input type=text field contains the placeholder value and post the placeholder value to the server side. I didn't have time to find a best way, so doing following logic to check each input text and compare the value is same as placeholder.

function IE9Placeholder(formId) {
        if (!isIE9()) {
            return;
        }

        $(formId+ " input[id!=''][type='text']").each(function (index, element) {
            var _element = $(element);
            var phValue = _element .attr("placeholder");
            if (!phValue ) {
                return;
            };

            if (phValue === _element .val()) {
                _element .val('');
            }
        });
    }

    $scope.submit = function () {

        forIE9Placeholder(formId);

        submit form to server side.

}

At this point, I think i should spend time to write my own to support IE9 placeholder at angularjs.