How to Support IE9 Input Placeholder for Angular.js

2015/5/12 min read
bookmark this
Responsive image

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.