入力欄に初期値を表示

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">

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について