OOMORI.lunch

例えば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は夢が広がるなあ。