How to Support IE9 Input Placeholder for Angular.js
2015/5/12 min read
bookmark this
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..
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.