【jQuery】IE8及びIE9にplaceholder属性を付与する
2014年10月5日
テキストボックスにヒント表示を表示する場合、HTML5で使用できるようになったplaceholder属性を使用することが多いと思います。
しかし、IE8及びIE9を使っている方はplaceholder属性が使用できません（上記テキストボックスには真っ白で表示されると思います。）ので、javascriptを用いて疑似的にplaceholder属性を付与します。
terkel.jp様にてIE8及びIE9対応のjavascriptがありました。
[javascript]
//placeholder対応
$(function () {
var supportsInputAttribute = function (attr) {
var input = document.createElement('input');
return attr in input;
};
if (!supportsInputAttribute('placeholder')) {
$('[placeholder]').each(function () {
var
input = $(this),
placeholderText = input.attr('placeholder'),
placeholderColor = 'GrayText',
defaultColor = input.css('color');
input.
focus(function () {
if (input.val() === placeholderText) {
input.val('').css('color', defaultColor);
}
}).
blur(function () {
if (input.val() === '') {
input.val(placeholderText).css('color', placeholderColor);
} else if (input.val() === placeholderText) {
input.css('color', placeholderColor);
}
}).
blur().
parents('form').
submit(function () {
if (input.val() === placeholderText) {
input.val('');
}
});
});
}
});
[/javascript]
placeholder属性に使用している文字は使えない等の制約があります。
placeholder属性に対応しているブラウザは使用しないようにもなっているのでいい感じです。
terkel.jp様のサイトにて処理の仕様について細かく解説していただいているので興味ある方はそちらへどうぞです。
