placeholderを自作してみる

何も入力しないままinputからフォーカスを外した時に、placeholderを表示させないようにしたかったので、placeholderをそれっぽく自作してみました。

サンプルコード

HTML

<div class="input-wrapper">
	<input type="text" name="name" data-placeholder="(例) 天ノ川 沙夜" />
</div>

CSS

.input-wrapper {
	position: relative;
	width: 400px;
}
.input-wrapper input {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: #000000 2px solid;
	border-radius: 4px;
	padding: 15px 10px;
	outline: none;
	font-size: 14px;
}
.input-wrapper .placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 15px 10px;
	font-size: 14px;
}

JavaScript

$(function() {
	$('.input-wrapper').find('[data-placeholder]').each(function() {
		// placeholderの要素作成
		$(this).after('<p class="placeholder"></p>');
		$(this).next().text($(this).attr('data-placeholder'));

		// アクセス時点で値が入力されている場合、placeholderを消しておく
		if($(this).val() == '') {
			$(this).next().show();
		} else {
			$(this).next().hide();
		}
	});
	// placeholderがクリックされたとき
	$('.placeholder').on('click', function(){
		$(this).hide().prev(':text, textarea').focus();
	});
	// tabなどでフォーカスが当たったとき
	$('.placeholder').prev(':text, textarea').on('focus', function(){
		$(this).next().hide();
	});
});

inputと同じサイズにした要素(.placeholder)をかぶせて、クリックされたときに要素を非表示+下のinputにフォーカスを当てるという処理を行っています。
自作placeholderのデモページ