jQuery:IE バージョン6以下にもfocusを

jQuery:IE バージョン6以下にもfocusを

最近、大の苦手なJavaScriptを習得しようと勉学に励んでいる。最初は基礎部分から覚えていくかなぁと考えつつも、長続きしそうもないので、いきなりライブラリからいじっていく事を決意する。雑誌やサイトを検索する事小一時間。様々なライブラリをみつけ、概要を読み、興味を失い流れていく。prototype.js?難しすぎてわかんねーぜっ。

その中で唯一興味を持ったのがjQueryだった。少しだけ掘り下げてみると、どうやらスクリプトが大の苦手な自分にも、なんとか吸収できそうな予感が走った。直感的にわかりやすく、ビジュアル効果も比較的簡単にかけられそう。これならWebデザイナーに人気でるはずだ。

jQueryの導入

今回書いたJavaScriptはjQueryとの併用で初めて動作するので、こちらも準備しておかないと意味がない。まずjQueryから、ライブラリをダウンロードしてこよう。トップページにダウンロードリンクがあり、三種類のjQueryがあるが、圧縮なしの Uncompressed は、デバックなど行う場合にはとても重宝するので、ヘヴィーユーザーはこちらのほうが良いかもしれないが、ファイル容量が大きい。とりあえず難しい事をしないのならば、軽量の Minified and Gzipped で問題ないだろう。

ダウンロードしたら、早速FTPを使ってアップロードしよう。ディレクトリはまかせるが、今後読み込ませるかもしれないJavaScript用のディレクトリを作成しておいたほうが、後々楽だ。たとえば「js」「javascript」などの名前にしておくとわかりやすい。

IE6にもダイナミックを

jQueryのアップロードが済んだらここから本番だ。今回は、疑似クラス「:focus」が扱えないInternet Explorer 6以下のバージョン。コイツにフォーカスが扱えるように見せるJavaScriptを勉強を兼ねて書いてみた。要素やclass, idを特定することが比較的容易なjQueryならばこそやり遂げる事ができた偉業だ。

なお、デフォルトではformのinput要素のtype属性にtextが設定されているもの、textarea要素に的を絞っている。つまり、これらが選択状態になったときのみにfocus疑似クラスが扱えるようになるのだ。

form_focus.js

$(function(){
$("input[@type='text'],textarea")
.focus(function(){
$(this).addClass("focus");
})
.blur(function(){
$(this).removeClass("focus");
});
});

こいつをページ直に貼り付けてもいいが、外部ファイルとして読み込ませておいたほうが、後々楽になるだろう。

まず上記のコードをファイルとして保存して、form_focus.jsのように拡張子を.jsにして、FTPで先ほどのディレクトリにファイルをアップロード。次に下記のように<head>〜</head>の間に読み込ませるコードを書き足す。

外部JavaScriptの読み込み

<script src="[jQueryのURL]" type="text/javascript"></script>
<script src="[form_focus.jsのURL]" type="text/javascript"></script>

スタイルシートでfocusのデザイン

次にfocusしたときのデザインをしてみよう。以下のコードをスタイルシートに書き足す。

スタイルシート

.focus {
color: white;
background-color: black;
}

これでinput要素のtype属性にtextが設定されているもの、textarea要素をフォーカスさせた時に、入力欄がブラックになり、文字がホワイトになる。この辺はもろにスタイルシートなので、思いっきりデザインすることができる。IE6以下のバージョンで解釈できるプロパティならば、制限はないのだ!!

フォーカス前

フォーカス前

フォーカス後

フォーカス後

種明かしをすると、このJavaScriptは、input要素のtype属性、textarea要素をフォーカスさせたときだけに、フォーカスさせた要素に「focus」クラスを強制的に付加するものだ。つまり、本当にfocusが扱えるようにするのではなく、要素にクラスを追加させて、focusが扱えるように見せるJavaScriptなのだ。

つまりだ。Internet Explorer 6以下のバージョン以外のブラウザでも、focusクラスが付加されるので、上記のスタイルシートを記述するだけで、focusを疑似的に再現させることができる。まぁ、結局同じ動作をするわけなのだけれども。

人類の神秘

実は早速SCREAMOでは、その発展版のJavaScriptを組み込んでいる。右サイドバーの検索フォームや、コメントのフォームなど、すべてをfocusするようにした。さらにデフォルトで入力されている文字をfocusすると消して、戻すと現れる動作も外部JavaScriptファイルで行うように設定。この辺は次回紹介しようと思うが、なんとJavaScript初心者の自分でも、比較的簡単にこの辺はつくる事ができたのは恐怖と驚愕を超え、人類の神秘と呼ぶにふさわしい快挙だろう。

我ながら素晴らしい!!

SCREAMO - Comment

related story