入力欄に初期値を表示
jQueryでplaceholder（初期表示）設定
jQueryで実装の前に、HTML5であればplaceholderを使って簡単に設定可能。
HTML
<label for="email">メールアドレス</label>
<input type="text" placeholder="メールアドレス">
<label for="pw">パスワード</label>
<input type="password" placeholder="パスワード">
jQuery
$(function () {
$('#email').val('メールアドレス');
$('#pw_dummy').val('パスワード');
// メールアドレス処理
$('#email').focus(function() {
if ($(this).val() == 'メールアドレス') {
// フォーカス時に文字列を消去
$(this).val('');
}
})
.focusout(function() {
if ($(this).val() == '') {
// フォーカスアウト時に文字列をセット
$(this).val('メールアドレス');
}
});
// パスワード処理
$('#pw_dummy').focus(function() {
// フォーカス時にtextを消し、passwordを表示
$(this).hide();
$('#pw').show().focus();
});
$('#pw').focusout(function() {
if ($(this).val() == '') {
// フォーカスアウト時にpasswordを消し、textを表示
$(this).hide();
$('#pw_dummy').show();
}
});
});
CSS
#pw {
display: none;
}
HTML
<label for="email">メールアドレス</label>
<input type="text" name="email" id="email">
<label for="pw">パスワード</label>
<input type="text" name="pw_dummy" id="pw_dummy">
<input type="password" name="pw" id="pw">
サンプル
