マッシュアップの作品で、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
文字数カウントの関数がonKeyUpイベントハンドラにのみ登録されているせいで、
返信削除1.日本語入力ONでなにかしら文字を入力
2.Enterを押さず、マウスをクリックする事で確定
って手順を踏むと文字数がカウントされないもようー。
お腹が痛い。
まじでか!!
返信削除さすが!!
うーん、どうしよー。
onclickイベントハンドラで同じファンクションを足すかな。
>お腹が痛い。
大丈夫??
ついでにonclickだけだと、マウスを
返信削除textArea外でクリックして確定した時も
もしかして反応しないかも??
その場合はonBlurにも追加か……
いやーめんどいね!
>ついでにonclickだけだと、マウスを
返信削除textArea外でクリックして確定した時も
もしかして反応しないかも??
あれ、それ現行でいけると思うよ。
確かめたような気がする!!
さっきのクリック教えてくれてありがとう!!
更に追記。
返信削除マウスを使って
右クリック→貼り付け
ってやると反応せず。
>更に追記。
返信削除>マウスを使って
>右クリック→貼り付けってやると反応せず。
まじでかぁー。
報告サンクス!!
onchangeたさないとだめだー。
やっぱ納期短いとガタガタだ。
来週の火曜まで終わるかな。。。
orz
手伝おーか?(笑
返信削除>手伝おーか?(笑
返信削除まじで!!
ってか、だんだん、チャットっぽくなってきたなー