2008/09/09

[javascript]文字数カウント like twitter

マッシュアップの作品で、twitterのような文字カウントを実装したいなと思ってぐぐったら鷹の島さん入力文字数の制限を可視化する JavaScriptという記事に実装方法が書かれていました。

が、しかし、確かに、実装方法は書いてありましたが、prototype.jsを使うらしく、使い方を完璧に把握してないので、自作できないものかと考えてみました。

<div id="test">150</div>
<textarea type="text"
style="height:50px;overflow-y:auto;"
id="hoge"
onKeyUp="lf_ValueCount();"
cols="40"></textarea>
<script type="text/javascript">
function $(aId){return document.getElementById(aId);}

function lf_ValueCount(){
if(150 - $("hoge").value.length < 0){
return $("test").innerHTML="文字数オーバー";
}
return $("test").innerHTML = 150 - $("hoge").value.length;
}

</script>

リンク先のソースよりも単純になったと思うのですが、逆に不安になってしまう。
一応動作確認を行って問題なさそうだったんだけど。。。

もし見つかったらコメントいただけたらと思います。
文字数:
150


8 件のコメント:

  1. 文字数カウントの関数がonKeyUpイベントハンドラにのみ登録されているせいで、
    1.日本語入力ONでなにかしら文字を入力
    2.Enterを押さず、マウスをクリックする事で確定

    って手順を踏むと文字数がカウントされないもようー。


    お腹が痛い。

    返信削除
  2. まじでか!!
    さすが!!

    うーん、どうしよー。
    onclickイベントハンドラで同じファンクションを足すかな。

    >お腹が痛い。

    大丈夫??

    返信削除
  3. ついでにonclickだけだと、マウスを
    textArea外でクリックして確定した時も
    もしかして反応しないかも??
    その場合はonBlurにも追加か……


    いやーめんどいね!

    返信削除
  4. >ついでにonclickだけだと、マウスを
    textArea外でクリックして確定した時も
    もしかして反応しないかも??

    あれ、それ現行でいけると思うよ。

    確かめたような気がする!!

    さっきのクリック教えてくれてありがとう!!

    返信削除
  5. 更に追記。
    マウスを使って
    右クリック→貼り付け
    ってやると反応せず。

    返信削除
  6. >更に追記。
    >マウスを使って
    >右クリック→貼り付けってやると反応せず。

    まじでかぁー。

    報告サンクス!!

    onchangeたさないとだめだー。
    やっぱ納期短いとガタガタだ。

    来週の火曜まで終わるかな。。。

    orz

    返信削除
  7. >手伝おーか?(笑

    まじで!!

    ってか、だんだん、チャットっぽくなってきたなー

    返信削除