テキストエリアで入力行数固定WEB相談室Webページ作成に関しての何でも掲示板です。Tomcat]フォーム内のテキストエリアで下記のように記述すると、表示行数は5行に固定できますが、入力行数は固定できません。%></textarea>テキストエリアで入力行数を固定したいのですが、どのように記述すればよろしいでしょうか?ご指導よろしくお願い致します。]入力行数が表示行数を越えたタイミング、つまり、スクロールが発生したタイミングでチェック掛けるようにすれば、できそうですね。]補足:上記はWindowsで試した場合のスクリプトなので、入力側のブラウザが使用しているOSごとに、適切な改行コードに対応するような改良が必要かと思います。]補足その2:・ASP(かな?)で吐き出される初期値?は、指定行数以内ですよね?・コピペや他からValueを与えられた場合、それが指定行数を越えていても役に立ちません。(最後の一文字が削られるだけ)ユーザーがキー入力したときに、指定行数を越えた文字(または改行コード)を削除するスクリプトなので。]おかげさまでやりたいことは実現できました。ありがとうございました。ところで、提示して頂いたサンプルでは、具体的にどのような処理をしているのでしょうか?私自身、JavaScriptは、ほとんど経験ないので教えて頂けないでしょうか?宜しくお願い致します。]提示して頂いたサンプルをじっくり解読してみたところ大体、どのような処理が行われているかわかりました。おかげさまでとても助かりました。ごだっちさん、どうもありがとうございました。]説明が上手くなかったり、不適切な用語だったりするかもしれませんが、適宜適切な表現に読み替えてくださいまし。onscroll="chk(this.value);">テキストエリアの行数が初期値(上記の場合だと3行の表示領域)を越えるとテキストエリア内のスクロールが開始される。ここでonScrollイベントが発生するので、イベントを検出したらchk()として定義した関数を呼ぶ。このとき、this.value(このテキストエリアの値、つまり入力内容)をパラメータとしてchk()に渡す。最初に、chk()では、与えられたパラメータ(this.value)を、strという名前で扱う。(a)入力データ(str)の長さ(文字数)を取得して、変数lに格納する。変数lから1引いた値を変数mに、2引いた値を変数nに格納する。(b)&(c)strのm番目の文字を取得し、かつ、escapeした内容を変数oに格納する。同様に、n番目の文字をescapeした内容を変数pに格納する。最後の一文字を指定するためには、文字数から1引いた値(m)を指定する。最後から2文字目を指定するには、文字数から2引いた値(n)を指定する。(d)最後の2文字が、CR+LF(を示す文字コード)であるかどうかを判定する。(e)入力データ(str)全部をescapeして、変数estrに格納する。(f)&(g)estrの長さ(文字数)を取得して、変数enに格納する。enから6引いた値を変数emに格納する。(h)estrの0番目からem番目までの文字列を取得して、変数estr2に格納する。(i)estr2をunescapeして、変数strに格納する。これにより、変数strには、入力文字列から末尾のCR+LFを取り除いた内容が格納される。変数strに格納する。これにより、変数strには、入力文字列から最後の一文字を取り除いた内容が格納される。(k)テキストエリアの値として、上記の処理によって最後の文字(またはCR+LF)が取り除いた値を代入する。これにより、指定行数(初期表示行数)に納まるデータのみが与えられる。]ご丁寧に教えて下さいまして、どうもありがとうございました。明確にどのような処理が行われているか理解できました。今後とも、宜しくお願い致します。]関数を呼ぶ時に引数を追加したら、関数が実行されなくなってしまいました。下記コードで間違っている箇所を教えて下さい。Javascriptの初歩的なことを聞いてしまい、申し訳ございません。ご指導宜しくお願い致します。]ここを直すだけで良さそうですよ。修正前onscroll="chk(this.value,"summary1");"onscroll="chk(this.value,"summary2");"修正後onscroll="chk(this.value,'summary1');"onscroll="chk(this.value,'summary2');"修正前の記述だと、onScrollイベントが発生した際に、ダブルクォーテーション「"」から次のダブルクォーテーションまでの「"chk(this.value,"」が呼ばれるとみなされるため、それ以降の「summary1");">」の部分が意味をなさず、文法エラー?になってしまいます。]教えてもらいました通りに修正したらうまくできました。ごだっちさん、本当にありがとうございました。これからも、宜しくお願い致します。]以前ごだっちさんに教えて頂いたコードで不具合が発生しました。入力行数が表示行数を越えたタイミングでチェックを掛けていますが、表示している最後の行で改行しないで入力すると表示行数以上に入力できてしまい、既に入力したデータが消えてしまいます。この問題を解決するには、コードのどの部分を修正すれば宜しいでしょうか?改めてご指導宜しくお願いします。]上の質問の具体例は、以下のようになります。例)�@表示行数5行(横幅の最大は全角で10文字)のテキストエリアに以下のように入力する。12345ああああああああああ�A入力行数が表示行数を越える(改行しない)と以下のように表示されてしまう。(12345が消えてしまう。]こちらでは再現できないようなので、そのページのURLもしくはソースを提示できますでしょうか。次の文字の入力がキャンセルされるのですが...。確かに次の文字の入力がキャンセルされ、入力行数が表示行数を越えることはなくなりました。アラートを表示しないと先程提示した不具合が発生してしまいます。表示行数まで入力した後で、文字を追加するとスクロールが発生しますが、アラートが表示されず入力行数が表示行数を超えてしまいます。(下の例を参照)これらの問題を解決するには、どうしたらよいか教えて下さい。例)�@表示行数5行(横幅の最大は全角で10文字)のテキストエリアに以下のように入力する。12345�A文字を追加(改行しない)するとスクロールが発生しますが、アラートが表示されず、入力行数が表示行数を超えてしまう。str.slice(0,m);}alert("入力行数が表示行数を超えています。]上の質問の例の�Aが間違っていました。正しくは、下記のようになります。�A文字を追加(改行しない)するとスクロールが発生しますが、アラートが表示されず、入力行数が表示行数を超えてしまう。123ああああああああああ4最後の行で入力した値が消えるのは、問題ないので無視して下さい。アラートを表示しないと先程提示した不具合が発生することについての回答お待ちしております。]こんなところまでは何とか。alert("入力行数が表示行数を超えています。]ごだっちさんに教えて頂いた通りに実行したら、確かに最終行でそれ以上の入力はできなくなりました。最終行以外の行で文字を追加(改行しない)すると、アラートを表示する時も、表示しない時も入力行数が表示行数を超えてしまいます。(下の例を参照)この問題を解決するには、どのようにすれば宜しいでしょうか?ごだっちさん、ご指導宜しくお願いします。例)�@表示行数5行(横幅の最大は全角で10文字)のテキストエリアに以下のように入力する。12345いいいいいいいいい�A最終行以外の行に文字を追加(改行しない)するとスクロールが発生しますが、最後の行に入力した値の一文字が消え、入力行数が表示行数を超えてしまう。・内容自体は、以前にアップしたテキストエリアの行数をカウントするスクリプトの流用です。・キー入力ごとに行数をカウントし、上のスクリプト上では「nLine」を求めます。・nLineが5以内(5行以内)であれば、現在のテキストエリアの内容を「oldstr」として保存します。・それ以外(5行を超えた場合)であれば、キー入力を無効にして、フォーカスを外し、テキストエリアの内容を、5行以内のときに保存されていた内容に戻します。]教えて頂いたコードを実行したら、複数行にまたがって改行しないでデータを入力した場合、テキストエリアにundefinedと表示され、入力したデータが消えてしまいます。(下の実行結果参照)この問題を解決するには、どのようにすれば宜しいでしょうか?ごだっちさん、続けてご指導宜しくお願いします。[実行結果]�@表示行数5行(横幅の最大は全角で10文字)のテキストエリアに以下のように入力する。12345ああああああああああ(ここでキーアップする)�Aキーアップイベントが発生した時に、入力したデータが消えundefinedと表示される。(どの行を入力しても発生します。]ごだっちさんのコードをそのまま実行したら、確かにうまくいきました。このコードをもとに、私の環境で実行すると>>21の不具合が発生します。ソースの一部を公開しますので、誤りがあるところを教えて下さい。oldstr;//alert("入力できるのは30行までです。おける「1〜5」で、かつ、ユーザー自身による入力が「あ」キーの押しっぱなしによる連続入力であるのならば、ユーザーがキーから手を離したときに最初のkeyupイベントが発生します。この時点で入力オーバーを生じていれば、「直前のkeyupイベント時において保存された内容」は存在せず、従ってoldstrの内容も無く、よって、テキストエリア内の表示が空白に戻ります。これを回避するには、以下のようにテキストエリアにフォーカスが当たった時点の内容を、oldstrの最初の値として与えてしまうことでしょう。oldstr;//alert("入力できるのは5行までです。]>>24で教えてもらいましたコードを実行したら、>>23についてはうまくできました。ありがとうございました。このコードをもとに、私の環境で実行すると今度は以下の不具合が発生します。�@最終行より前の行で複数行にまたがって改行しないでデータを入力した場合、最終行に自動的にカーソルが移動し、最終行が入力できなくなる。�A最終行で改行し、その次の行で何か入力し(入力値は表示されない)BackSpaceキーを押すと画面が切り替わってしまう。ソースの一部をまた公開しますので、誤りがありましたらご指摘下さい。oldstr;alert("入力できるのは30行までです。](1)は現象確認できません。(2)もローカルでは確認できませんが、おそらくは、テキストエリアから外されたフォーカスがサブミットボタンかURL欄か、そのようなコントロールの何処かに行ってしまっていて、かつ、Backspaceを押したことでサーバーとの間で何らかの処理が走っているのだと思われます。(2)に関しては、以下のようなソースで対応できるかと。alert("入力できるのは30行までです。onfocus="alert('入力できるのは30行までです。');"></span></form>ただし、上記ソースだとタブキーなどによるフォーカス移動でも、'dummy'にフォーカスが当たるとアラートが表示されるので、実際にはスクリプト内のアラートを有効にして、'dummy'側のonfocusイベントを削ってください。上記のソースを単体で走らせて、(1)(2)のトラブルが発生するのであれば、回答例のソースを提示した者として解決策も考えられますが、受け手の側で改造・組み込みを行った結果によるトラブルについては、自身の責任で改造なり組み込みなりの加工をして頂けないでしょうか。そちらの環境ではトラブルが起きると云われてしまいましても、環境依存のトラブルなら、環境を構築している方と相談されるのが宜しいかと。思いついたんですが、こんなのどうでしょうか。MS-IME2000)ではこれでカーソル位置も維持できるし、IME周りの不具合も大分減るようです。本当に不具合がないかどうかは私にはわからないです。上手くいってるだけかもしれないし、使っているIMEによっても違うかもしれません。側でもチェックは必要でしょうしリアルタイムの入力制限にはあまり固執しない方がいいように思います。]サンプルを提示して頂きましてありがとうございました。>>26のソースをローカルで確認しましたら、最終行で改行しないで連続入力した場合に、この操作を2回連続して行うと表示行数以上に入力できてしまいます。これは、どうしてでしょうか?教えて下さい。oldstr;alert("入力できるのは5行までです。以上に入力できないのは正しいのですが、例えば3行目で改行又は改行しないで4行目まで連続して入力すると、元々5行目に入力した内容が消えてしまいます。これを回避するには、どうすればよいでしょうか?[ごだっちさんへ]>>25の質問�Aについて、>>26で提示して頂いたコードを実行したらBackSpaceキーで画面が切り替わることはなくなりました。ありがとうございました。>>28の質問について、何かわかりましたらご指導宜しくお願い致します。]>>28の現象は確認できました。半角英数入力では再現せず、全角入力でのみ発生する現象であることから、IME関連の仕様上の限界なのかも知れません。以下のスクリプトで回避できるようです。行頭の「//」を削除してください。true;mobj.elements['editbutton'].style.visibility='visible';alert('入力できるのは5行までです。style="visibility:hidden;"></form><br>※入力可能な行数は5行です。<br>最下行は「余白」です。]>>30のコードをローカルで実行したら、>>28で質問していたことができました。ありがとうございました。>>30のコードでは、最下行に「余白」があり、表示行数以上に入力しようとしたら"入力し直す"ボタンが表示されますが、やはりこのようにしないと回避できないのでしょうか?できれば、最下行の「余白」と"入力し直す"ボタンは表示させたくないのですが、この問題を解決する上で可能でしょうか?ご指導宜しくお願いします。]>>32のコードで目標としていたことは実現できました。本当にどうもありがとうございました。最後に、提示して頂いた>>32のコードでは、具体的にどのような処理をしているのか教えて頂けませんでしょうか?私自身、JavaScriptは、ほとんど経験ありませんので、どうぞ宜しくお願い致します。]>>32のコードの意味は大体わかりました。わからなかったのは下記のコードです。このコードが無くても正常に動作するように思うのですがこれは、どのようなことをしているのでしょうか?度々、質問してしまい申し訳ございませんが、宜しくお願いします。]>>34のコードを実行しないと、思ったとおり動かないことがわかりました。誤解してしまい、すみませんでした。このコードをデバッグしながら実行したら、どのようなことをしているのか理解できました。ごだっちさん、weenさん、初心者の私に親切に教えてくれて本当にありがとうございました。心より感謝しています。これからも宜しくお願いします。