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

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

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

今回よりフォーム関連の実践

前回はタブパネルをプラグインとして利用することについての説明をしました。プラグインとして作ることで,様々なサイトで使いたい部分で使えるようにできるという点でも,とても便利です。今後もプラグインとして利用できるような作り方の説明も入れていきますので,みなさんもぜひ挑戦してみてください。

さて,今回より数回にかけて,フォーム(Form)関連の実践例についてご紹介していきます。フォームでは,ユーザーが使いやすいよう(入力しやすいように)に工夫することで様々な点において,利便性を向上させることができます。

今回はフォームの入力部分に入力例などを入れておき,フォーカスしたときにその入力例を消す仕組みを作ってみることにします。

入力例を入れておきフォーカス時に消す

フォームの入力部分で,入力例を入れておくことで,その部分にどのような入力をしたらいいのか明示しておくことができます。このようにしておくことで,ユーザーが入力の時に戸惑わなくて済むようになります。

入力例を最初からHTMLに入れておくこともできるのですが,それではフォーカスしても最初に入れておいた文字は消えず,わざわざ入力する人が消す手間が増えてしまいます。ユーザビリティーとしては高めることができても,ユーザーの手間が増えるのは良くありません。

HTML

<p><label for="sample01">名前:</label><input id="sample01" type="text" value="技評太郎" /></p>

valueにあらかじめ入力例を入れただけのもの

valueにあらかじめ入力例を入れただけのもの

サンプルでは入力例として「技評太郎」という値をvalueに入れただけのものです。このままでは,先にも書いたように,例ではなく,実際のユーザーの名前を入力する際に,わざわざその文字を消さなくてはなりません。

そこで,入力欄にフォーカスしたときに,あらかじめ入っていた文字を消すということを,JavaScript側で行うようにします。

focusでvalueの値を削除

$(function(){
    $('input').focus(function(){
        $(this).val('');
    });
});

valueを消すだけの例

valueを消すだけの例

上記の例では,あらかじめHTML側のvalueに入力例を入れておき,フォーカスしたときに,それを消すというだけのシンプルな例です。

しかしこれだけでは,仮にフォーカスが入っても,入力しないままでフォーカスがはずれた時に,何も値が入っていない状態になってしまいます。例えばその欄だけ入力を後回しにしたときになど,入力が何もなかった場合に,元の入力例を表示するようにしておくのが親切です。

focus

focusはinputやtextareaなどの要素に,マウスやタブキーでフォーカスした際に,イベントを実行させるものです。簡単な例を見てみましょう。

focusでアラートを表示

$(function(){
    $('input').focus(function(){
        alert('フォーカスしました');
    });
});

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

著者プロフィール

長谷川広武(はせがわひろむ;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/

コメント

コメントの記入