テキストエリア内のバイト数表示方法についての質問
- テキストエリアに文字が入力されている場合に、そのバイト数を表示させる方法はあるでしょうか。
- onload="ShowLength(this.value);"では上手くいきませんでした。
- 質問者は、あらかじめテキストエリアに文字が入力されている場合に「0文字」と表示される現象に困っています。
- ベストアンサー
あらかじめ入力されたテキストエリア内のバイト数表示
以下のようなスクリプトで、テキストエリアに入力された文字のバイト数をカウントしているのですが、 あらかじめテキストエリアに文字が入力されてる場合に「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);"では上手くいきませんでした。 宜しくお願い申し上げます。
- 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やブラウザ毎に細かく場合分けしたりしておりまして、 出来れば昔のまま使用したいと思い、質問させて頂きました。
関連するQ&A
- テキストエリア入力文字数の表示で全角と半角を区別したいです。
JavaScriptで以下のようにテキストエリアで入力文字数を表示させているのですが、 全角文字も半角文字も同じ１文字としてカウントされてしまいます。 入力された文字が全角なら２、半角なら１としてカウントするように出来ないでしょうか？ ================================================================ /*テキスト入力フォームで文字数を表示する*/ function ShowLength( str ) { document.getElementById("inputlength").innerHTML = str.length + "文字"; } ---------------------------------------------------------------- <textarea cols="70" rows="10" onkeyup="ShowLength(value);" /></textarea> <p id="inputlength">0文字</p> ================================================================ 宜しくお願い致します。
- ベストアンサー
- JavaScript
- テキストエリアの制限字数以上の文字を消したい
いつもお世話になっております。 現在、JavaScriput勉強中の初心者です。 テキストエリアにJavaScriptでmaxlength機能を付け制限字数を超えると警告ダイアログを出す ようにしたのですがコピペで制限字数を２文字以上超えるとBackSpaceで１文字消すたびに 警告ダイアログが出るというバグが起きてしまいます。 そこで警告ダイアログのOKボタンを押すと制限字数以上の文字は消すプログラムが組みたい のですがどうすればよいですか？ あと残り入力可能文字カウンタをsetIntervalを使ったものに変更したら警告ダイアログすら表示 されなくなってしまいました・・・よろしくお願いします。 ●変更前 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> <script type="text/javascript"><!-- function ShowLength( str ) { document.getElementById("inputlength").innerHTML = 20 - str.length; } function check() { txt = document.myFORM.myTEXT.value; n = txt.length; if (n > 20) alert("20文字以内にしてください"); } // --></script> </head> <body> <form name="myFORM"> <textarea cols="46" rows="5" name="myTEXT" onkeyup="ShowLength(value); check();" onmouseout="ShowLength(value); check();"></textarea><br /> あと<span id="inputlength">20</span>文字入力できます<br /> </form> </body> ●変更後 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> <script type="text/javascript"><!-- (function(){ var intervalId = setInterval(function(){ var n = 20 - document.getElementsByName("myTEXT")[0].value.length; if(n < 0) n = 0; document.getElementById("inputlength").innerHTML = n; }, 100); })(); function check() { txt = document.myFORM.myTEXT.value; i = txt.length; if (i > 20) alert("20文字以内にしてください"); } // --></script> </head> <body> <form name="myFORM"> <textarea cols="46" rows="5" name="myTEXT" onkeyup="ShowLength(value); check();" onmouseout="ShowLength(value); check();"></textarea><br /> あと<span id="inputlength">20</span>文字入力できます<br /> </form> </body>
- ベストアンサー
- JavaScript
- ジャバスクリプトについて質問です。
ジャバスクリプトでテキストエリアに入力した文字数を表示したいのですが半角数でカウントは出来ませんか？ <html> <head> <title>チェック</title> <script type="text/javascript"><!-- function tyek( str ) { document.getElementById("inputlength"). innerHTML = str.length + "文字"; } // --></script> </head> <body> <textarea cols="40" rows="9" onkeyup="tyek(value);"></textarea> <p id="inputlength">0文字</p> <br> </body> </html> 上記の設定では全角も一文字、半角も一文字でカウントされます。 例 aあ ⇒２文字 これを半角一文字、全角二文字という風に設定したいのですがどうすればいいのでしょうか？まだスクリプトを勉強しだしたばかりでよく分かりません… 回答の方宜しくお願い致します。
- ベストアンサー
- JavaScript
- テキストエリアの表示文字
result の中身を以下のようにして、テキストエリアで表示させようと思いました。 結果は、表示はされるのですが、データとデータの間に数行の改行が入って表示されてしまいます。 <c:forEach item="${result}"> <textarea><c:out value="${result}"></textarea> </c:forEach> <textarea>、<c:out value="${result}">、</textarea>の位置を変えたりしてみたのですが、結果は同じでした。 同じ方法で、セレクトボックスには改行なく期待通りに表示されたので、テキストエリアでもできると思ったのですが・・・ アドバイスよろしくお願いします。
- ベストアンサー
- HTML
- ボタンをクリックするとテキストエリアに文字が表示される。
はじめまして 下記内容のJavaScriptを見つけたのですが これをどうにか違うものにしたいのです。 <html> <head> <TITLE>テキストエリアに複数項表示する</TITLE> <script language="JavaScript"><!-- function setChars() { str1="テキストエリアに"; str2="複数項にわたる文字を"; str3="表示します。"; document.myFORM.myTEXT.value=str1+"\n"+str2+"\n"+str3; } /--></script> </head> <body> <form name="myFORM"> <textarea name="myTEXT"rows="10"></textarea><br> <input type="button"value="複数行表示"onClick="setChars()"> </form> </body> </html> ------------------------------------------------ 例えば （月・火・水・木）とそれぞれのボタンがあるとします。 そのボタンを押すと、複数行テキストへ 月曜→○○○○ 火曜→○○○○ 水曜→○○○○ 木曜→○○○○ というように、表示させたいのです。 また、複数行テキストに入力された文字が消えず改行されて表示させたいのです。 自分でもいろいろと試してみたのですが、頭が悪く、全く思ったようにできません。 お忙しいところ大変申し訳ありませんが、 上記に記載した内容のスクリプトはありますでしょうか。 ご返答いただけると幸いです。
- ベストアンサー
- JavaScript
- テキストエリア文字制限について
テキストエリア文字制限について 失礼します。 javascript初心者です。 複数のテキストエリアの文字制限を行いたく 苦戦しております。 いろいろと検索してみましたが・・・ 2日ほど悩んでおります。 AとBでエラーが出た場合はCGIに流れず入力フォームに戻るのですが Bでエラーが発生しない場合CGIに流れてしまいます。 ですの文字数制限をしても結局CGIに流れてしまうのですが どのように記述すればよろしいでしょうか？？ なんとか・・・ご教授いただければ幸いです。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>入力文字数の制限</title> <script language="javascript" type="text/javascript"> <!-- var MAXLENGTH = 10; //入力許容最大文字数 function tareachk(frm){ var tmp = frm.vin1.value; var len = tmp.length; if(len > MAXLENGTH){alert("A入力可能な文字数は"+MAXLENGTH+"文字までです");} var tmp = frm.vin2.value; var len = tmp.length; if(len > MAXLENGTH){alert("B入力可能な文字数は"+MAXLENGTH+"文字までです");} else{frm.submit();} } // --> </script> </head> <body> <form action="ccccc.cgi" method="post"> <textarea name="vin1" rows="5" cols="30">10文字まで入力可能</textarea><br> <textarea name="vin2" rows="5" cols="30">10文字まで入力可能</textarea><br> <input type="button" value="GO" onclick="tareachk(this.form);"> </form> </body> </html>
- ベストアンサー
- JavaScript
- div から テキストエリアに
divで表示させた文字を１０秒後に、javascriptで、テキストエリアに表示させる方法は、ありますでしょうか。もう、２週間くらい悩んでいます。cssでdivをテキストエリア風にするのではありません。お分かりになる方が、いたらどうか助けてください。 <div id="area"></div> → 表示文字 <TEXTAREA id="area2"></TEXTAREA> ------------------- １０秒後→ I 表示文字 I -------------------
- ベストアンサー
- JavaScript
- テキストフィールドでの全角チェックについて
テキストフィールド内にて、全角文字以外が入力されたらエラーをだすようにしています。そのとき以下のソースだと改行した時に、enterが半角とみなされてしまう現象が起こってしまいました。 function jstrlen(str) { len = 0; for (i = 0; i < str.length; i++) { wrk = escape(str.substr(i,1)); if ((wrk.substr(0,2) == "%u") && (wrk < "%uFF71")) { len++; } len++; } return len; } function isZen(str) { len1 = jstrlen(str.value); len2 = str.value.length * 2; if(len1 != len2){ alert("半角文字が混在"); str.focus() ; }else{ alert("全角文字のみ"); } } 対処方法をどなたかよろしくお願いします。
- ベストアンサー
- JavaScript
- テキストエリアの長さ(表示文字数)が違う?
ジャンルを迷ったのですが... CGIを改造中です。テキストエリアを利用してスクロールする長文を表示させようとしています。 もちろんですが、管理画面(入力画面)もテキストエリアです。 ここでものすごく変な事が起きています。 表示画面では、<TEXTAREA rows="19" cols="23">と表示してあり、全角11文字・半角22文字で折り返しています。 管理画面では、<TEXTAREA cols="19" rows="10" name="com1">と表示してあり、全角11文字・"半角16文字"で折り返しています。 なんでこんな差が出るのでしょうか? ちなみに、ヘッダー部分はサブルーチンを使ってどちらも同じですし、スタイルシートももちろん一緒です。
- 締切済み
- HTML
- テキストエリア内で改行するには。
次のスクリプトを実行すると、テキストエリア内に 01234560 と数字が表示されますが、これを 0 1 2 . というように改行も含めてテキストエリアに出力するにはどうすればよいでしょうか。 ￥ｎという文字を使用するのでしょうか？ <html> <head> <script language="JavaScript"> <!-- var textA="" function my1() {for (i=0;i<11;i++){textA=textA+new String(i)} document.form1.text1.value=textA;} //--> </script> </head> <body> <form name="form1"> <textarea name="text1" size="10"></textarea> <input type="button" value="CLICK!" onClick="my1();"> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 ご教示を頂きました方法で見事に表示できました。 誠にありがとうございます。 一部、cookieに保存された内容などを表示した場合に、動作しないケースがありましたが、 以下のようにして、ページを読み込んだあとに実行することで解決できました。 <script type="text/javascript"> window.onload=function(){ ShowLength(document.getElementById("comment").value); } </script> onloadを使うのは、あまり良くないとご指摘を受けそうですが…… この度は何度もご回答を頂きまして、大変に感謝しております。 どうもありがとうございました。