検索ボックスにフォーカス時にボックス内のテキストを表示/非表示

Ads

Result

jQuery

//フォーカスイベント
$("#s").focus(function() {
     //フォーカス時はvalueを空にする
    if (this.value == this.defaultValue) {
        this.value = "";
    }
     //フォーカスが離れたらデフォルト状態
}).blur(function() {
    if (!this.value.length) {
        this.value = this.defaultValue;
    }
});

html

<input type="text" name="example" id="s" value="search"><input type="submit" value="search" class="btn">

via

Unobtrusive “clear searchfield on focus”

タイトルとURLをコピーしました