JavaScript ライブラリを使わずに placeholder を実装する

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>