2010-03-27 1:45 pm
例えばtwitterアプリのような文字数制限のあるtextareaでは、よく「あと○○文字」とか文字数を数えて表示したりすることがある。先日仕事で、iPhone用のサイトで同じように文字数を数えて表示することが
あったんだけど、ちょっと変わったやり方をしたので紹介してみる。
仕様としては、文字を入力する毎に文字数を数えて、「あと○○文字」と表示するというもの。最初はkeyupを使ってPCのブラウザで確認してたんだけど、実機で試してみるとどうにも上手く動いてくれない。で、調べてみたところ、keyupのイベントはtextareaの内容が更新される前に呼びだされているらしい。
参考：Ajaxian » Safari on the iPhone update fixes and breaks events
なるほどと思い、さっそくsetTimeoutを設定して試してみるものの、英語キーボードの時は問題ないが、日本語入力の時にkeyupがreturnキーとbackspaceキーの時しか反応してくれない。
何か良い方法ないかなーとSafari向けのtwitterアプリサイトを見てまわってたら、Logpostというサービスで、実機の日本語入力時でもきちんと文字数を数えているのを発見。ちょっと失礼してソースを拝見させて頂いたところ、下記のようになっていた。
function count(e, l) {
if(! e) return;
var rc = l - e.value.length;
$('count').innerHTML = rc + ' left';
setTimeout("count($('" + e.id + "'), " + l + ")", 600);
}setTimeout内で同じ関数を呼ぶことで、1秒おきに文字数を数えるようになっている。あとはonfocusとかでこの関数を呼びだすだけで、ほぼリアルタイムに文字数を数えることができる。
余談だけど、いろいろ調べているときに見つけたドキュメントに、javascriptからObjective-Cを呼び出す方法が書かれていた。意外な制限とかもあったりするけど、iPhoneSafariは夢が広がるなあ。
2009-04-16 11:14 pm
格好いいmootoolsのプラグインを見つけたので紹介。
JavascriptやFlashを使ったライブラリを開発しているらしく、ちょっと洒落たサイトを作るときに使いたくなるようなmootoolsのプラグインが公開されている。
プラグインの種類は以下の通り。
あとはFlashのコンテンツでgoogleDriveというのがある。これはキーボードを操作することで、真ん中に表示された車がGoogleMap上を走るというもの。GoogleMapを利用したコンテンツは沢山あったが、こういう発想のは見たことがなかったので、面白い。
2009-04-16 11:09 pm
今日はjQueryのプラグインを紹介。
エクスプローラとかでやるような、Shift+クリックで一気にチェックボックスを選択できるようにするプラグインです。
webのインターフェースだとチェックボックスって結構当たり前な感じだけど、正直ものすごく使いづらい。2, 3個なら良いけど、10とか20とかになってくると、もうだれてしまう人も少なくないはず。
このjQueryプラグインは、普段使い慣れたエクスプローラ等と同じ感覚で、チェックボックスを操作できるようなるので、多少は心地よく使えるようになるんじゃないかなと思う。
2009-04-16 11:07 pm
良い感じな日付入力用のJavascriptライブラリを見つけたので紹介。
定規のような見た目の部分をスライドさせることで、日付の範囲選択をすることができるというモノ。こういうのはテキストボックスが2つあって、その二つにそれぞれカレンダーが付いているってのはよく見る。だけど、それをスライドで選択ってのはあまり見ないんじゃないだろうか。
導入は上記ページのとおりにスクリプトを読み込んで、デフォルトの日付と、選択できる範囲を指定するだけ。超簡単。ライセンスはGPLらしい。
ただし、サンプル通りに書くと月の表示が英語になっている。ここを数字とかに変えたい場合は、datejsのページでDatejs-all-Alpha1.zipを落としてから、Datajs-all/build/date-ja-JP.jsをdate-en-US.jsと置き換える必要がある。ちなみにjp-JPを使った場合は数字表示になる。
で、実際に使ってみて貰ったところ、結構好評だった。使うシーンは限られるかもしれないけどね:-P