« 07.12 JSPと文字コードの狭間で | ココ | 07.14 民宿に1人泊 »
2006年7月13日
雲を掴む感じなリンク
昨日作ったAjax(XMLじゃないから"x"じゃないやん、という突っ込みはもう今更しなくてもいいよね)で、返ってくるresponseTextにJavaScriptを実行するようにリンクを作っておけば…
表示されるテキストにはリンクが張ってあって、リンクをクリックしたらそのテキストが入力欄に代入される。
なんてちょっとカッコよさげなインターフェースが出来上がっちゃう。
しかし、それだけじゃなんか締りがない。なんて思ってしまい。…テキストボックスからフォーカスが外れる(onBlur)→表示されるテキストが消える(innerHTML="")、という命令を書いてしまったんですね。
ま、ご想像に難くないでしょうが…リンクをクリックしようとしたらリンクが消える。という由々しき事態に。
ここで登場したのがsetTimerout()関数。一定時間後に指定した命令を実行する、という昔から存在するJavaScriptで、よくテキストを一定時間間隔で電光掲示板のようにずらすのに使われる関数。これを使えば、テキストを消すのにちょっとしたタイムラグを作ることができて、リンクをクリックできるようにすることが可能になる。ま、予想通りにうまく動きまして。
しかし、問題は同じような仕組みで動くテキストボックスが何個もあること。で、使用するテキスト表示領域は同じ。…簡単に書けば、目的地を入力するテキストボックスと、Projectコードを入力するテキストボックスについて、同じようなインターフェースを使ってて、表示するための<div id=...>が同じ、ということなんやけど。
同じ仕組みを使っているテキストボックスにフォーカスが移った場合、移った先の入力候補を表示した直後にsetTimerout()によって入力候補が抹消されてしまうという悲劇が。これはどこかでclearTimerout()を実行しなければならない、ということなんですが…まぁ、旅費精算するためなので日付ごとに候補を表示する場所が用意されてるわけです(位置的に、入力するテキストボックスのすぐ下に表示された方が見やすいでしょう? というわけで日付ごとに用意したわけ)。
フォーカスが他の日付のテキストボックスに移ったときに、前に入力してた日付の候補表示テキストはどうなるねん、と見てみたら、やっぱり予想通り表示されたまま。…困った。
setTimerout()の戻り値(WinAPI風に言えばハンドル)をclearTimerout()に渡してやれば、そのタイマーだけを止められるということらしいので、それを使おう、としてなにやら自分でもよく分からんことやってた。結局、setTimerout()をしたときのハンドルと、そのときの日付に相当する番号を変数に入れて、フォーカスを得たテキストボックスは番号が同じならタイマーを止め、違えば何もしない(つまり入力候補を表示してたinnerHTMLは""になる)というようにして解決。
これで格好よくなった。
By ただ at 21:03 カテゴリー ; mein Erbe
« 07.12 JSPと文字コードの狭間で |
07月の記事
| 07.14 民宿に1人泊 »
トラックバック
このエントリーのトラックバックURL:
http://pinmarch.sakura.ne.jp/mt/mt-tb.cgi/569
