RyoSugimoto
1/21/2015 - 8:55 AM

inputのplaceholderが使えない環境でも、擬似的に実装する。

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('');
				}
			});
		});
	}
});