テキストエリアの文字数


アンケートや投稿などでユーザーからフォームに記入してもらう場合、名前やアドレスのように1行で収まるものは <INPUT TYPE="text"> で定義されるテキストボックスを使いますが、文字数の多いコメントは、複数行入力のできるテキストエリアを使います。 フォーム(<FORM>〜</FORM>)内で定義する点はテキストボックスと同じですが、テキストエリアの場合は <TEXTAREA> という独自のタグを使い、そして必ず </TEXTAREA> というエンド・タグを必要とします。 <TEXTAREA>〜</TEXTAREA> の間に何か文字を入れると、それがテキストエリアのデフォルトの文字となります。

<FORM>
<TEXTAREA cols=30 rows=3>コメントを入れて下さい。
</TEXTAREA>
</FORM>

上の「コメントを入れて下さい」(普通はこんなものは不要ですが)のあとに何か長めの文章を入れてみて下さい。 Internet Explorer の場合には問題ないのですが、Netscape だとスクロール・バーが表示され、どこまでもどこまでも文字が入っていきます。ユーザーにとって困るのは、こんなとき1文をどこで区切ったらいいのか、どこで改行したら良いのか悪いのか、わからないことです。 Netscape を使っている人なら、そういう経験をした人は多いと思います。

TEXTAREA タグの rows は縦の数値、つまり行数、cols は横の数値、つまり文字数(実はそうではない)を表すものと一般に思われています。 しかしこれは、表示されるテキストエリアの縦横の長さを規定するだけで、入力される行数や文字数を制限するものではありません。 (Internet Explorer では自動改行されるようです。)Netscape で表示された横幅以上に文字を入力させないようにするには、ワードラップさせる必要があります。

<FORM>
<TEXTAREA cols=30 rows=3 wrap="physical">
</TEXTAREA>
</FORM>

上のように wrap= を定義すると、1行は表示されたところで自動的に改行されます。もっと幅広くしたければ、cols や rows の数値を多くすればいいのです。 これだけでも、ユーザーにとってずっと扱いやすいものになります。 Internet Explorer を使っている場合は自動改行されるので、この点を顧慮しない人が多いのですが、インターネットのように様々なユーザーを相手にする場では、それではいけません。

それでは、rows で規定された数字は、1行の文字数を表しているでしょうか?答えは、ノーです。というか、ブラウザの設定や数値の多さによって著しい誤差が出てきます。 私の使用している環境下では、Netscape の場合、大体 cols の数値と文字数には対応が見られました。例えば cols=10 なら半角10字、全角5字という具合です。 但しそれも cols=20 くらいまでで、それ以上になると文字数の方が多くなりました。それでもまだ我慢できる誤差です。ところが Internet Explorer の場合には、結果は全く違いました。

下の表を見て下さい。cols で定義した数値とその結果表示される1行文字数を Netscape と Internet Explorer で比較したものです。 日本語環境では通常、全角で入力しますから、英数字の場合も含めてすべて全角の場合の結果です。日本語の文章の場合、英数字はあまり使用しないでしょうから、専らかなと漢字を問題にするとしても、例えば cols=70 の場合、漢字なら10字、かなでも6字の差が両者では出てしまうのです。

cols の数値と1行の全角文字数
cols Netscape Internet Explorer
共通 漢字 かな 英大文字 数字 英小文字
10 5 2 2 2 3 3
20 10 6 7 9 9 12
30 16 10 12 15 15 21
40 21 14 16 20 22 27
50 26 18 21 26 28 36
60 32 23 26 31 34 43
70 37 27 31 38 40 51

もちろんこれは私の使用環境で試した結果であり、ほかの人の場合には違う結果が出るかも知れません。 重要なことは、インターネットのように不特定多数の人がアクセスする場では、ユーザーの使用環境によって(例えば「私」が Nescape を使用するか、IE を使用するかの違いだけでも)ひどく違った結果になるということなのです。

フォームから送信されたテキストエリアの文章は、ふつう改行を無視した1文として送られるので、1行の文字数にはあまりこだわらないほうがいいと思います。 1行の文字数は、飽くまでユーザーのブラウザのフォーム上での表示のされ方、と考えましょう。但しテキストエリアに入力される文字数は、受け取る側にとっても重要だと思います。 よく「100字前後にして下さい」とか、「200字以内に収まるようにして下さい」とか書かれていますが、ユーザーが文字数を数えるのは結構大変です。テキストエリアに何文字入力されたか、一発でわかる機能があったら、ユーザーにとっても助かりますね。

ボタンを押すと、テキストエリアに日本語で入力した文字数をテキストボックスに表示するプログラムを作ってみましょう。以下の例ではテキストエリアの cols を50、rows を5にしてワードラップさせています。 その下に「文字数チェック」のボタンと文字数を表示するためのテキストボックスを付けます。

<FORM name="user">
<TEXTAREA name="comment" wrap="physical" cols=50 rows=5></TEXTAREA><P>
<INPUT type="button" value="文字数チェック" onClick="Check()">
<INPUT type="text" name="counter" size=3 maxlength=3>字</P>
</FORM>





ボタンをクリックするとテキストエリア内の文字数をチェックするためには、onClick で呼び出される Counter() 関数を定義しなければなりません。 HTML の </TITLE> と </HEAD> の間に次のように書きます。

<SCRIPT Language="JavaScript">
<!--

function Check() {
Br=navigator.appName;
Num=document.user.comment.value.length;
if(Br=="Netscape") document.user.counter.value=Num/2;
else if(Br=="Microsoft Internet Explorer") document.user.counter.value=Num;
}

//-->
</SCRIPT>

JavaScript では文字数の数え方が Netscape と Internet Explorer では異なっていて、前者では全角1字を2文字として数えますが、後者は半角1字も全角1字も1字として数えます。 ここで問題となっているのは日本語全角文字ですから、まずユーザーの使用ブラウザ名を取得してから Netscape なら得られた数値を2で割らなければなりません。 いずれにせよ、HTML の <TEXTAREA> と </TEXTAREA> の間にスペースなどが入るとそれも1字として計算されるので注意が必要です。

上のテキストエリアに適当な日本語文を入力してから「文字数チェック」のボタンを押してみて下さい。 入力した文字数がテキストボックスに表示されるはずです。(注意:改行は、Netscape では1、Internet Explorer では2として算入されます。また半角文字1字はNetscape では0.5、Internet Explorer では1となります。)

いうまでもなく、文字数チェックボタンは JavaScript を使用していますから JavaScript を実行できないブラウザでは使えません。 しかも送信用フォームでは JavaScript を実行できないブラウザでもボタンやテキストボックスを表示してしまいますので、実際にフォームで使用するときにはそのことを付記する必要があるでしょう。




次のトピックは「TABLE の自動作成」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで