もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第9回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(1)

この記事を読むのに必要な時間:およそ 4 分

入力欄が空白ならデフォルトに戻す

それでは,フォーカスがはずれた時に,何も値が入っていない空白の状態の場合に,最初に入れておいた例を再度表示させる例を作ってみましょう。

また,フォーカスしたことをわかりやすくするために,少し装飾を加える工夫も入れようと思います。フォーカスしたときに背景色とボーダーをわかりやすいように,色がつくようにしてみます。

CSS

input{
	background-color: #ffffff;
	border: 1px solid #7B9EBD;
}

input.focus{
	background-color: #eeeeff;
	border: 2px solid #003399;
}

入力欄が空白ならデフォルトに戻す

$(function(){
    $('input').focus(function(){
        if($(this).val() == this.defaultValue) { $(this).val(""); }
        $(this).addClass('focus');
    }).blur(function(){
        if($(this).val() == "") { $(this).val(this.defaultValue); }
        $(this).removeClass('focus');
    });
});

入力欄が空白ならデフォルトに戻す例

入力欄が空白ならデフォルトに戻す例

背景色とボーダーを変える部分については,addClassを利用し,フォーカスした時にだけclassをつけることで変化をつけます。CSSでは,classがついているときと,ついていないときの指定がされています。

ここで一点注意ですが,背景色だけを変えようとすると,入力欄がくぼんだように見える状態になってしまいます。これはボーダーの種類が「inset」という内側に影の入ったようなタイプになってしまい,少し立体に見えるようになるからです。背景色を指定しない時と同じように表示をさせたい場合は,ボーダーの指定もするようにしてください。

このサンプルでは,フォーカスした時に,サンプルとして入れておいた値と同じであれば,その値が消えるようにし,また,フォーカスがはずれた時に値に何も入ってなければ,元の値を表示するものです。

blur

blurはinputやtextareaなどの要素から,フォーカスがはずれた際に,イベントを実行させるものです。簡単な例を見てみましょう。

focusでアラートを表示

$(function(){
    $('input').blur(function(){
        alert('フォーカスがはずれました');
    });
});

inputからフォーカスがはずれると「フォーカスがはずれました」のアラートを表示する簡単なサンプルです。フォーカスからはずれる時に何かする際はこれを利用しましょう。

valueを使わずlabelを利用した実践例

さて,ここまでHTMLのvalueに直接値を入れておき,それをフォーカス時に消すというサンプルをご紹介してきました。その方法であれば,HTMLもJavaScriptもシンプルかつ簡単な構造で作成することができます。

しかし,この方法だと,全てのvalueをあらかじめ入れておかなければならないので,JavaScriptを利用していないような環境の人がいた場合,値を削除をしてから入力しなければならなくなってしまいます。

そこで,あらかじめvalueに値を入れておくことはせず,他の方法で,入力例を表示しておく実践サンプルをもう一つご紹介いたします。

HTML

<table>
<tbody>
<tr>
<th>名前:</th>
<td><input id="sample61" type="text" /><label for="sample61">例:技評太郎</labrl></td>
</tr>
<tr>
<th>カナ:</th>
<td><input id="sample62" type="text" /><label for="sample62">例:ギヒョウタロウ</labrl></td>
</tr>
<tr>
<th>役職:</th>
<td><input id="sample64" type="text" /><label for="sample64">例:係長</labrl></td>
</tr>
</tbody>
</table>

labelを入力例としてみせるサンプル

$(function(){
    $('input').each(function(){
        var thisInput = $(this);
        var label = $(this).next();

        thisInput.parent().wrapInner('<div />');
        if(thisInput.parent().css('position') != 'absolute'){
            	thisInput.parent().css('position','relative');
        }
        label.css({
            	position: 'absolute',
            	top: '2px',
            	left: '5px'
        });
    });
	
    $('input').focus(function(){
        var label = $(this).next();
        label.hide();
    }).blur(function(){
        var label = $(this).next();
        if(this.value.length<1){
            	label.show();
        }
    });
});

labelを使った実践例

labelを使った実践例

positionで配置

この実践例では,positionを利用して,inputの上にlabelを表示させ,input内にあるかのようにみせています。positionをうまく利用するために,wrapInnerを使い,inputとlabelを囲うdivを,tdの内側につけています。そのdivをposition:relative;で配置し,その中のlabelにposition:absolute;で,inputに重なるように配置します。

あとはinputにフォーカスしたときに,そのlabelを非表示にし,もしinputに何も入力がなければ,再度そのlabelを表示するようにしておきます。

入力があるかないかは,input内の文字数を「this.value.length」を使いカウントし,1文字もなければ再度表示させます。

作り方は様々

今回は,valueにあらかじめ値を入れておいてそれをフォーカス時に消す例と,labelを使い,input要素に重ねて表示させる2つの方法をご紹介いたしました。

ここでご紹介したのはあくまで一例であり,他にも考えれば様々な仕組みで同様のものは作れます。例えば,valueの値を動的に入れたり削除したりする方法も考えられると思います。

これらを導入するサイトのデザインや構造によっても,作り方はそれぞれになってくると思いますので,そのサイトにあった作りで作るのもいいかもしれませんし,どんなサイトでも使えるように,プラグインとして利用するなど,作り方を変えるのもいいと思います。

そのサイトだけの作りでもいいでしょうし,どんなサイトでも使えるようにするのもいいですし,様々チャレンジしてみてはいかがでしょう。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/