HTML5 の placeholder 非対応ブラウザでも簡単に placeholder を実装する方法。jQuery などのライブラリは利用していません。
JavaScript
function onFocusPlaceholder(input) { input.nextSibling.style.display = "none"; } function onBlurPlaceholder(input) { if (!input.value) { input.nextSibling.style.display = ""; } }
HTML
<input type="text" name="keyword" onfocus="onFocusPlaceholder(this)" onblur="onBlurPlaceholder(this)" value="" id="keyword" /> <label for="keyword" class="placeholder">ここにキーワード入力</label>