- ベストアンサー
テキストエリア内のバイト数表示方法についての質問
- テキストエリアに文字が入力されている場合に、そのバイト数を表示させる方法はあるでしょうか。
- onload="ShowLength(this.value);"では上手くいきませんでした。
- 質問者は、あらかじめテキストエリアに文字が入力されている場合に「0文字」と表示される現象に困っています。
- das_horn
- お礼率85% (40/47)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
下記javascriptをそのままHTML内の該当箇所に追記すれば、たぶん動きます。 ただし、No.3にも書きましたが、HTML上のどこで外部javascriptが読み込まれているかによって、動いたり動かなかったりします。 ------------------------------------------ <textarea name="sitecomment" onkeyup="ShowLength(this.value);"></textarea> <p id="inputlength">0文字</p><br /> <!--↓これ--> <script type="text/javascript"> ShowLength(document.getElementById("sitecomment").value); </script> ------------------------------------------
その他の回答 (3)
- tracer
- ベストアンサー率41% (255/621)
プログラムはどのタイミングで実行するかが非常に重要です。 提示されたコードで何をしているかは分かりますが、どこにどのように書かれたものかわからないので、回答できません。 つまり、ShowLength関数の箇所だけ修正しても動きませんよ。 あと、javascriptをまったくご存知ないようなので、質問者さんには荷が重い作業だと思います。 分からないという質問には回答できますが、結果、全部やってくれというのは回答がつきにくいですよ。
お礼
ご回答ありがとうございます。 外部ファイルから関数を呼び出して、サーチエンジン登録画面のサイト紹介文入力のところに使用しております。 --- 外部ファイル --- function ShowLength( str ) { len = 0; for(i=0;i<str.length;i++) { var c = str.charCodeAt(i); if ( (c >= 0x0 && c < 0x81) || (c == 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)){ len += 1; } else { len += 2; } } document.getElementById("inputlength").innerHTML = len + "文字"; } --- HTML入力フォーム --- ▼コメント<br /> <textarea name="sitecomment" onkeyup="ShowLength(this.value);"></textarea> <p id="inputlength">0文字</p><br /> これで<head>～</head>の間で外部ファイルを呼び出して、正常に動作しております。 ただ、登録されているサイトの更新をする場合に更新ページを呼び出したとき、 テキストエリアには既に登録時に入力した紹介文が入力されている訳ですが、「0文字」となっている状態です。 テキストエリア内でカーソルを動かすと入力されているバイト数に表示が更新されますが、 出来れば、更新ページを読み込んだときに「0文字」のところを既に入力されている文字のバイト数にしたいわけです。 難しいようでしたら、今回は諦めようと思います。 この度は、何度も回答を頂き、誠にありがとうございます。
- tracer
- ベストアンサー率41% (255/621)
>出来れば昔のまま使用したいと思い、質問させて頂きました。 表現がおかしかったかもしれませんが、新しい、古いは特に問題ではなくて、onloadやonkeyupを使わずに参照すればよいという回答です。特にjqueryを使わなければならないということもありません。 それともどうしてもonloadやonkeyup属性を使いたいのでしょうか。 端的に言えば、textare要素よりも後に <script> var str=document.getElementById("textareaID").value; </script> を書けば参照できます。
お礼
ご回答ありがとうございます。 いえいえ、ご回答を頂けて感謝しております。 どうしてもonloadやonkeyup属性を使いたい訳ではございません。 カウント文字数の表示部は以下のようになっているのですが、 お教え頂いた方法で取得した文字数をそこに表示させるにはどのようにすれば良いのでしょうか。 <p id="inputlength">0文字</p> 素人で申し訳ございません……。
- tracer
- ベストアンサー率41% (255/621)
htmlの要素に直接onloadとかonclickを記述する方法は、完全に昔のやり方で効率が悪いです。 今は、htmlに依存せずに外部ファイルのjavascriptからhtmlを参照するのが一般的でしょう。 たとえば、普及しているjQueryというライブラリを使えば、 var len=$('textarea').val().lgenth; と書くだけで参照できます。 onloadやonkeyupなんて必要ありません。 厳密に言うなら、jqueryを読み込んだ後に、ready関数の中に書きます。 詳しくはjqueryを調べてみてください。
お礼
ご回答ありがとうございます。 実装したのが随分と昔のことなので申し訳ございません。 jqueryを使用する方法があることは調べて少し知っていましたが、 改行されたときのカウント数をOSやブラウザ毎に細かく場合分けしたりしておりまして、 出来れば昔のまま使用したいと思い、質問させて頂きました。
お礼
ご回答ありがとうございます。 ご教示を頂きました方法で見事に表示できました。 誠にありがとうございます。 一部、cookieに保存された内容などを表示した場合に、動作しないケースがありましたが、 以下のようにして、ページを読み込んだあとに実行することで解決できました。 <script type="text/javascript"> window.onload=function(){ ShowLength(document.getElementById("comment").value); } </script> onloadを使うのは、あまり良くないとご指摘を受けそうですが…… この度は何度もご回答を頂きまして、大変に感謝しております。 どうもありがとうございました。