あらかじめ入力されたテキストエリア内のバイト数表示

解決済

質問者：das_horn
質問日時：2012/11/02 20:53
回答数：4件

以下のようなスクリプトで、テキストエリアに入力された文字のバイト数をカウントしているのですが、
あらかじめテキストエリアに文字が入力されてる場合に「0文字」と表示されます。

ページを開いたとき、あらかじめテキストエリアに文字が入力されてる場合に、そのバイト数を
表示させる方法はあるでしょうか。

もし、おわかりになる方がおられましたら、ご教示いただければ幸いです。

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 + "文字";
}

<textarea onkeyup="ShowLength(this.value);"></textarea>

ちなみに、onload="ShowLength(this.value);"では上手くいきませんでした。

宜しくお願い申し上げます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.4ベストアンサー

回答者： tracer
回答日時：2012/11/03 03:47

下記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>
------------------------------------------

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

ご教示を頂きました方法で見事に表示できました。
誠にありがとうございます。

一部、cookieに保存された内容などを表示した場合に、動作しないケースがありましたが、
以下のようにして、ページを読み込んだあとに実行することで解決できました。

<script type="text/javascript">
window.onload=function(){
ShowLength(document.getElementById("comment").value);
}
</script>

onloadを使うのは、あまり良くないとご指摘を受けそうですが……

この度は何度もご回答を頂きまして、大変に感謝しております。
どうもありがとうございました。

通報する

お礼日時：2012/11/03 13:11

No.3

回答者： tracer
回答日時：2012/11/03 00:34

プログラムはどのタイミングで実行するかが非常に重要です。

提示されたコードで何をしているかは分かりますが、どこにどのように書かれたものかわからないので、回答できません。
つまり、ShowLength関数の箇所だけ修正しても動きませんよ。
あと、javascriptをまったくご存知ないようなので、質問者さんには荷が重い作業だと思います。
分からないという質問には回答できますが、結果、全部やってくれというのは回答がつきにくいですよ。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

外部ファイルから関数を呼び出して、サーチエンジン登録画面のサイト紹介文入力のところに使用しております。

--- 外部ファイル ---

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文字」のところを既に入力されている文字のバイト数にしたいわけです。

難しいようでしたら、今回は諦めようと思います。

この度は、何度も回答を頂き、誠にありがとうございます。

通報する

お礼日時：2012/11/03 01:14

No.2

回答者： tracer
回答日時：2012/11/02 22:09

>出来れば昔のまま使用したいと思い、質問させて頂きました。

表現がおかしかったかもしれませんが、新しい、古いは特に問題ではなくて、onloadやonkeyupを使わずに参照すればよいという回答です。特にjqueryを使わなければならないということもありません。
それともどうしてもonloadやonkeyup属性を使いたいのでしょうか。

端的に言えば、textare要素よりも後に

<script>
var str=document.getElementById("textareaID").value;
</script>

を書けば参照できます。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

いえいえ、ご回答を頂けて感謝しております。
どうしてもonloadやonkeyup属性を使いたい訳ではございません。

カウント文字数の表示部は以下のようになっているのですが、
お教え頂いた方法で取得した文字数をそこに表示させるにはどのようにすれば良いのでしょうか。

<p id="inputlength">0文字</p>

素人で申し訳ございません……。

通報する

お礼日時：2012/11/02 22:58

No.1

回答者： tracer
回答日時：2012/11/02 21:36

htmlの要素に直接onloadとかonclickを記述する方法は、完全に昔のやり方で効率が悪いです。

今は、htmlに依存せずに外部ファイルのjavascriptからhtmlを参照するのが一般的でしょう。

たとえば、普及しているjQueryというライブラリを使えば、

var len=$('textarea').val().lgenth;

と書くだけで参照できます。
onloadやonkeyupなんて必要ありません。
厳密に言うなら、jqueryを読み込んだ後に、ready関数の中に書きます。
詳しくはjqueryを調べてみてください。