フォームのインタフェースデザイン(2)

エ・ビスコム・テック・ラボ
2008-06-06 08:00:00
  • このエントリーをはてなブックマークに追加

未対応のブラウザにも対応する - ユーザーのアクションに応じてフォームのデザインを変える場合

 前回紹介したフォームに対する:hoverや:focusの指定も、JavaScriptで設定することが可能だ。次のようなソースを利用すれば、:hoverなどに未対応のInternet Explorer 5以上でも、ユーザーのアクションに応じてフォームのデザインを変えることができる。

カーソルを重ねたテキストボックスの色を変える

 次のソースでは、onMouseOver属性でテキストボックスにカーソルを重ねたときの色を黄緑色に、onMouseOut属性でテキストボックスからカーソルを外したときの色を白色に設定している。

function white(obj){
obj.style.backgroundColor='white';
}

function green(obj){
obj.style.backgroundColor='greenyellow';
}

名前:

住所:

ブラウザで表示を確認する

 ブラウザでの表示は次のようになる。

テキストボックスにカーソルを重ねた場合 テキストボックスにカーソルを重ねた場合
テキストボックスからカーソルを外した場合 テキストボックスからカーソルを外した場合

選択・入力中のテキストボックスの色を変える

 次のソースでは、onFocus属性で選択・入力中のテキストボックスの色を水色に、onBlur属性で選択を解除したときの色を白色に設定している。

function white(obj){
obj.style.backgroundColor='white';
}

function blue(obj){
obj.style.backgroundColor='skyblue';
}

名前:

住所:

ブラウザで表示を確認する

 ブラウザでの表示は次のようになる。

テキストボックスを選択して文字を入力中の場合 テキストボックスを選択して文字を入力中の場合
テキストボックスの選択を解除した場合 テキストボックスの選択を解除した場合
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]