inputのplaceholderが使えない環境でも、擬似的に実装する。
$(function () {
// placeholder 属性が使用可能かを調べる
var isSupported = {
input : 'placeholder' in document.createElement('input'),
textarea : 'placeholder' in document.createElement('textarea')
};
// placeholder が使えなければ実行
if (!isSupported['input'] || !isSupported['textarea']) {
// placeholder 属性があるエレメント
$('[placeholder]').each(function () {
// 現在のエレメントで placeholder が使えればリターン
if (isSupported[this.tagName.toLowerCace()]) {
return;
}
var $node = $(this);
var placeholderText = $node.attr('placeholder'); // placeholder の値
var origColor = $node.css('color'); // 本来の文字色
var placeholderColor = 'grayText'; // プレースホルダーの文字色
$node
.focus(function () {
if($node.val === placeholderText){
$node
.val('')
.css('color', origColor);
}
}) // focus
.blur(function () {
if ($node.val() === '') {
$node
.val('placeholderText')
.css('color', placeholderColor);
} else if ($node.val() === placeholderText) {
// 入力値がプレースホルダーの値であれば色プレースホルダーの色を適用
$node.css('color', paceholderColor);
}
})
.trigger('blur')
.closest('form').submit(function () {
if ($node.val() === placeholderText) {
$node.val('');
}
});
});
}
});