RSS Feed
Twitter
2010年2月18日(更新2010年3月1日) 
MuRa jQueryはJavaScriptのライブラリなんだけど、jQueryを使うと「htmlのタグから特定のclassや属性のタグを選んで操作する」っていう処理が簡単に書けちゃうのでよく使っている。
今回は、「特定の入力欄に来るとIMEを自動的にオンオフする」スクリプトの紹介と、jQueryを使ったJavaScriptの書き方を解説する。
IMEを勝手にオン・オフされるのは実は俺は大っ嫌いなんだけど、お客様から頼まれたら仕方がない。cssで指定すればいいんだけど、今回はデザインと分離したいためjQueryを使って書いてみた。ちなみにIMEのオン・オフはIEでのみ働く。
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>日本語入力モード変更テスト</title> <script language="JavaScript" type="text/javascript" src="js/jquery-1.4.1.min.js"></script> <script language="JavaScript" type="text/javascript" src="js/jquery.ime-mode.js"></script> </head> <body> <form> 名前 <input type="text" name="name"><br /> 郵便番号 <input type="text" name="zip"><br /> 住所 <input type="text" name="address"><br /> TEL <input type="text" name="tel"><br /> FAX <input type="text" name="fax"><br /> パスワード <input type="password" name="password" maxlength="40"><br /> 内容<br /><textarea name="area" wrap="soft" cols="50" rows="15"></textarea> <input type="hidden" name="hidden" value="hidden"> </form> </body> </html>
htmlには、jQueryと作ったJavaScriptを読み込むタグ2行を追加するだけ。
jQueryはタグ書き換えをスクリプトで容易にできるのでhtmlを汚さずに済む。
jquery.ime-mode.js
$(function(){
// 日本語入力モードONにするname属性
var activeName = {
name:1,
address:1,
area:1
};
$("input:visible[type!='password'],textarea").each(function(){
if(activeName[$(this).attr("name")] != undefined) {
$(this).css("ime-mode", "active");
} else {
$(this).css("ime-mode", "inactive");
}
});
});
このJavaScriptの4～6行目の部分を修正して、日本語入力モードをオンにしたいタグのname属性を「name属性:1,」のように書けばよい。この場合は名前、住所、内容の入力のときにIMEがオンになり、その他の入力タグではオフになる。
JavaScript解説
1行目 $(function(){ と16行目 }); について。$はjQueryオブジェクトのエイリアスで、jQuery()という関数の引数に無名関数function(){}を渡している。$() または jQuery() は「DOMオブジェクト構築後にdocumentオブジェクトに対して関数を実行する」というもの。言い換えるとhtmlが読み込まれた後ブラウザに表示する前に関数が実行されるので、表示が乱れることがなくタグを書き換えることができる。
実は1行目 $(function(){ と16行目 }); を削除しても動く。9行目の $() と同じなので。じゃあなぜあるかというと、変数やら関数やらを色々書いた後に $(function(){ }); で全体をガバッと囲ってやると、名前空間が閉じ込められて変数名や関数名が外から見えなくなり他のスクリプトと衝突しなくなるから。この記述は省略形で、prototypeと併用すると$が衝突するので、ちゃんとした書き方はまた後で紹介したい。
3～7行目は普通の変数宣言。
9行目 $(“input:visible[type!='password'],textarea”) はセレクターと言って、DOM構築後documentオブジェクトから、inputタグで見えていてpasswordじゃないもの、またはtextareaタグを選択する。
その次の .each(function(){ は、選択されたオブジェクト一つ一つに対して無名関数10～14行目を実行する。
10行目 $(this).attr(“name”) は、現在のオブジェクト this を $ で jQueryオブジェクト型にして、attr(“name”)でそのオブジェクトのname属性を返す。そして連想配列 activeName[] に定義されているかどうか判定している。
11行目 $(this).css(“ime-mode”, “active”); は、現在のオブジェクトのスタイル “ime-mode” に “active”を設定している。これでフォーカスがこのタグに来るとIMEがオンになる。13行目はその逆。
このように、jQueryの基本は、操作対象のタグをセレクターで選択して、選択されたタグに操作をする、という流れになり、このような処理が簡単にできる。
jQueryには他にも非同期通信とかAjaxに便利な機能が色々あるので、また紹介したい。
参考サイト
関連しているかも知れない記事:
- jQueryランダム表示プラグインと、jQueryプラグインの書き方
- ニコニコ動画風TwitterプラグインNiTwPressを入れた。そしてバグ修正
- ソースコードを整形表示するプラグインSyntax Highlighter for WordPress ビジュアルエディタにも対応
- Google AnalyticsのURLにページタイトルを付加する
- WordPress引越し・ドメイン変更・ディレクトリ移動の方法は意外と簡単
カテゴリー: 
タグ: