WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:テキストエリアで入力行数固定

0:[投稿] こねこ [2003/02/17 09:11 ][環境:IE6 Tomcat]

フォーム内のテキストエリアで下記のように記述すると、表示行数は5行に固定できますが、入力行数は固定できません。

<textarea name="summary1" cols="76" rows="5" ><% = a %></textarea>

テキストエリアで入力行数を固定したいのですが、どのように記述すればよろしいでしょうか?
ご指導よろしくお願い致します。


1:[回答] ごだっち [MAIL] [2003/02/17 13:37 ]

入力行数が表示行数を越えたタイミング、つまり、スクロールが発生したタイミングでチェック掛けるようにすれば、できそうですね。
例えば、こんなの。

<script language="javascript" type="text/javascript">
<!--
function chk(str){
var l = str.length;
var m = l - 1;
var n = l - 2;
var o = escape(str.charAt(m));
var p = escape(str.charAt(n));
if((o=='%0A')&&(p=='%0D')){
    var estr = escape(str);
    var en = estr.length;
    var em = en - 6;
    var estr2 = estr.slice(0,em);
    str = unescape(estr2);
}
else{
    str = str.slice(0,m);
}    
document.forms[0].summary1.value = str;
}
//-->
</script>
<form>
<textarea name="summary1" cols="10" rows="3" onscroll="chk(this.value);"></textarea>
</form>


2:[回答] ごだっち [MAIL] [2003/02/17 13:40 ]

補足:
上記はWindowsで試した場合のスクリプトなので、入力側のブラウザが使用しているOSごとに、適切な改行コードに対応するような改良が必要かと思います。


3:[回答] ごだっち [MAIL] [2003/02/17 13:51 ]

補足その2:
・ASP(かな?)で吐き出される初期値?は、指定行数以内ですよね?
・コピペや他からValueを与えられた場合、それが指定行数を越えていても役に立ちません。(最後の一文字が削られるだけ)
 ユーザーがキー入力したときに、指定行数を越えた文字(または改行コード)を削除するスクリプトなので。


4:[質問] こねこ [2003/02/17 14:56 ]

おかげさまでやりたいことは実現できました。
どうもありがとうございました。
ところで、提示して頂いたサンプルでは、具体的にどのような
処理をしているのでしょうか?
私自身、JavaScriptは、ほとんど経験ないので教えて頂けない
でしょうか?
宜しくお願い致します。


5:[完了] こねこ [2003/02/17 16:42 ]

提示して頂いたサンプルをじっくり解読してみたところ
大体、どのような処理が行われているかわかりました。
おかげさまでとても助かりました。
ごだっちさん、どうもありがとうございました。


6:[回答] ごだっち [MAIL] [2003/02/17 16:48 ]

説明が上手くなかったり、不適切な用語だったりするかもしれませんが、適宜適切な表現に読み替えてくださいまし。

function chk(str){
var l = str.length;              // (a)
var m = l - 1;
var n = l - 2;
var o = escape(str.charAt(m));   // (b)
var p = escape(str.charAt(n));   // (c)
if((o=='%0A')&&(p=='%0D')){      // (d)
  var estr = escape(str);        // (e)
  var en = estr.length;          // (f)
  var em = en - 6;               // (g)
  var estr2 = estr.slice(0,em);  // (h)
  str = unescape(estr2);         // (i)
}
else{
  str = str.slice(0,m);          // (j)
}
document.forms[0].summary1.value = str; // (k)
}

説明:

1.関数を呼ぶところ
 <textarea name="summary1" cols="10" rows="3" onscroll="chk(this.value);">
 テキストエリアの行数が初期値(上記の場合だと3行の表示領域)を越えると
 テキストエリア内のスクロールが開始される。
 ここでonScrollイベントが発生するので、イベントを検出したら
 chk()として定義した関数を呼ぶ。
 このとき、this.value(このテキストエリアの値、つまり入力内容)を
 パラメータとしてchk()に渡す。

2.関数chk()内の処理

 最初に、chk()では、与えられたパラメータ(this.value)を、strという名前で扱う。

(a)
 入力データ(str)の長さ(文字数)を取得して、変数lに格納する。
 変数lから1引いた値を変数mに、2引いた値を変数nに格納する。

(b)&(c)
 strのm番目の文字を取得し、かつ、escapeした内容を変数oに格納する。
 同様に、n番目の文字をescapeした内容を変数pに格納する。
 このとき、charAt()で指定するX文字目とは、最初が0から始まる指定であるため、
 最後の一文字を指定するためには、文字数から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を取り除いた内容が格納される。

(j)
 最後の文字がCR+LFで無かった場合(つまり、通常の文字入力だった場合)、
 入力データstrの0番目からm番目(最後から1文字前)の文字列を取得して、
 変数strに格納する。
 これにより、変数strには、入力文字列から最後の一文字を取り除いた内容が格納される。

(k)
 テキストエリアの値として、上記の処理によって最後の文字(またはCR+LF)が
 取り除いた値を代入する。
 これにより、指定行数(初期表示行数)に納まるデータのみが与えられる。


7:[完了] こねこ [2003/02/17 17:36 ]

ご丁寧に教えて下さいまして、どうもありがとう
ございました。
より明確にどのような処理が行われているか理解
できました。
今後とも、宜しくお願い致します。


8:[質問] こねこ [2003/02/17 19:01 ]

関数を呼ぶ時に引数を追加したら、関数が実行され
なくなってしまいました。
下記コードで間違っている箇所を教えて下さい。
Javascriptの初歩的なことを聞いてしまい、申し訳
ございません。
改めて、ご指導宜しくお願い致します。

<script language="javascript" type="text/javascript">
<!--
function chk(str,elm){
 var l = str.length;
 var m = l - 1;
 var n = l - 2;
 var o = escape(str.charAt(m));
 var p = escape(str.charAt(n));
 if((o=='%0A')&&(p=='%0D')){
     var estr = escape(str);
     var en = estr.length;
     var em = en - 6;
     var estr2 = estr.slice(0,em);
     str = unescape(estr2);
 }
 else{
     str = str.slice(0,m);
 }
 alert(str);

 if(elm=="summary1"){
    document.forms[0].summary1.value = str;
 }else if (elm=="summary2"){
    document.forms[0].summary2.value = str;
 }
}
//-->
</script>

<form>
<textarea name="summary1" cols="10" rows="3" onscroll="chk(this.value,"summary1");"></textarea>
<textarea name="summary2" cols="10" rows="3" onscroll="chk(this.value,"summary2");"></textarea>
</form>


9:[回答] ごだっち [MAIL] [2003/02/17 22:33 ]

ここを直すだけで良さそうですよ。

修正前
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");">」の部分が意味をなさず、文法エラー?になってしまいます。


10:[完了] こねこ [2003/02/18 09:08 ]

教えてもらいました通りに修正したらうまくできました。
ごだっちさん、本当にありがとうございました。
これからも、宜しくお願い致します。


11:[質問] こねこ [2003/03/04 09:23 ]

以前ごだっちさんに教えて頂いたコードで不具合が発生しました。
入力行数が表示行数を越えたタイミングでチェックを掛けています
が、表示している最後の行で改行しないで入力すると表示行数以上に入力できてしまい、既に入力したデータが消えてしまいます。
この問題を解決するには、コードのどの部分を修正すれば宜しい
でしょうか?
改めてご指導宜しくお願いします。



12:[質問] こねこ [2003/03/04 09:38 ]

上の質問の具体例は、以下のようになります。

例)
@表示行数5行(横幅の最大は全角で10文字)のテキストエリア
 に以下のように入力する。

 1
 2
 3
 4
 5ああああああああああ

A入力行数が表示行数を越える(改行しない)と以下のように
 表示されてしまう。(12345が消えてしまう。)

 あああああああああ
 あ


13:[回答] ごだっち [MAIL] [2003/03/04 10:04 ]

こちらでは再現できないようなので、そのページのURLもしくはソースを提示できますでしょうか。
一応、こちらの環境(Win2K+IE6)で確認した限りでは、





5あああああああああ <- ここまで入力した後、次の文字を入力しようとすると、
その時点でスクロールが発生するので、チェックが走ってアラートが表示され、
次の文字の入力がキャンセルされるのですが...。


14:[質問] こねこ [2003/03/04 11:23 ]

スクロールが発生した時にアラートを表示させたら、
確かに次の文字の入力がキャンセルされ、入力行数が
表示行数を越えることはなくなりました。
しかし、アラートを表示しないと先程提示した不具合
が発生してしまいます。

また、表示行数まで入力した後で、文字を追加すると
スクロールが発生しますが、アラートが表示されず
入力行数が表示行数を超えてしまいます。(下の例を参照)

これらの問題を解決するには、どうしたらよいか教えて下さい。


例)
@表示行数5行(横幅の最大は全角で10文字)のテキストエリア
 に以下のように入力する。

 1
 2
 3
 4
 5

A文字を追加(改行しない)するとスクロールが発生しますが、
 アラートが表示されず、入力行数が表示行数を超えてしまう。

 1
 2
 3あああああああああ
 あ  
 4
 5

[コード]
<script language="javascript" type="text/javascript">
<!--
function chk(str,elm){
var l = str.length;
var m = l - 1;
var n = l - 2;
var o = escape(str.charAt(m));
var p = escape(str.charAt(n));
if((o=='%0A')&&(p=='%0D')){
    var estr = escape(str);
    var en = estr.length;
    var em = en - 6;
    var estr2 = estr.slice(0,em);
    str = unescape(estr2);
}
else{
    str = str.slice(0,m);
}
alert("入力行数が表示行数を超えています。");

if(elm=="summary1"){
   document.forms[0].summary1.value = str;
}else if (elm=="summary2"){
   document.forms[0].summary2.value = str;
}
}
//-->
</script>

<form>
<textarea name="summary1" cols="10" rows="3" onscroll="chk(this.value,'summary1');"></textarea>
<textarea name="summary2" cols="10" rows="3" onscroll="chk(this.value,'summary2');"></textarea>
</form>



15:[質問] こねこ [2003/03/04 11:44 ]

上の質問の例のAが間違っていました。
正しくは、下記のようになります。

A文字を追加(改行しない)するとスクロールが発生しますが、
 アラートが表示されず、入力行数が表示行数を超えてしまう。

 1
 2
 3あああああああああ
 あ  
 4

最後の行で入力した値が消えるのは、問題ないので
無視して下さい。
アラートを表示しないと先程提示した不具合が発生
することについての回答お待ちしております。


16:[回答] ごだっち [MAIL] [2003/03/04 12:05 ]

こんなところまでは何とか。

・スクロールが発生した時点で入力されたキーを無効化
・フォーカスを強制的に外して、それ以上の入力を拒否

<script language="javascript" type="text/javascript">
<!--
function chk(str,elm){
event.keyCode=null;
document.forms[0].elements[elm].blur();
var l = str.length;
var m = l - 1;
var n = l - 2;
var o = escape(str.charAt(m));
var p = escape(str.charAt(n));
if((o=='%0A')&&(p=='%0D')){
 var estr = escape(str);
 var en = estr.length;
 var em = en - 6;
 var estr2 = estr.slice(0,em);
 str = unescape(estr2);
}
else{
 str = str.slice(0,m);
}
// alert("入力行数が表示行数を超えています。");
if(elm=="summary1"){
 document.forms[0].summary1.value = str;
}else if (elm=="summary2"){
 document.forms[0].summary2.value = str;
}
}
//-->
</script>
<form>
<textarea name="summary1" cols="10" rows="3" onscroll="chk(this.value,'summary1');"></textarea>
<textarea name="summary2" cols="10" rows="3" onscroll="chk(this.value,'summary2');"></textarea>
</form>


17:[質問] こねこ [2003/03/04 15:22 ]

ごだっちさんに教えて頂いた通りに実行したら、確かに最終行で
それ以上の入力はできなくなりました。
しかし、最終行以外の行で文字を追加(改行しない)すると、アラート
を表示する時も、表示しない時も入力行数が表示行数を超えてしまいます。(下の例を参照)

この問題を解決するには、どのようにすれば宜しいでしょうか?
ごだっちさん、ご指導宜しくお願いします。


例)
@表示行数5行(横幅の最大は全角で10文字)のテキストエリア
 に以下のように入力する。

 1
 2
 3
 4
 5いいいいいいいいい

A最終行以外の行に文字を追加(改行しない)するとスクロールが
 発生しますが、最後の行に入力した値の一文字が消え、入力行数
 が表示行数を超えてしまう。

 1
 2
 3あああああああああ
 あ  
 4
 5いいいいいいいい



18:[回答] ごだっち [MAIL] [2003/03/04 23:39 ]

こんどはどうでしょう?
<script type="text/javascript" language="javascript">
<!--
var oldstr;
function chk(obj){
    var str = obj.value;
    var nLine;
    var oRcts;
    var oTextRange = obj.createTextRange();
    oRcts = oTextRange.getClientRects();
    nLine = oRcts.length;
    if(5>=nLine){
        oldstr = str;
    }
    else{
        event.keyCode=null;
        obj.blur();
        obj.value = oldstr;
    }
}
//-->
</script>
<form>
    <textarea cols="10" rows="6" onkeydown="chk(this);"></textarea>
    <textarea cols="10" rows="6" onkeydown="chk(this);"></textarea>
</form>


19:[回答] ごだっち [MAIL] [2003/03/04 23:43 ]

補足
・内容自体は、以前にアップしたテキストエリアの行数をカウントするスクリプトの流用です。
・キー入力ごとに行数をカウントし、上のスクリプト上では「nLine」を求めます。
・nLineが5以内(5行以内)であれば、現在のテキストエリアの内容を「oldstr」として保存します。
・それ以外(5行を超えた場合)であれば、キー入力を無効にして、フォーカスを外し、テキストエリアの内容を、5行以内のときに保存されていた内容に戻します。


20:[回答] ごだっち [MAIL] [2003/03/04 23:48 ]

ちょこっと修正
・イベントをキーアップに修正
・「event.keyCode=null」を削除
<script type="text/javascript" language="javascript">
<!--
var oldstr;
function chk(obj){
    var str = obj.value;
    var nLine;
    var oRcts;
    var oTextRange = obj.createTextRange();
    oRcts = oTextRange.getClientRects();
    nLine = oRcts.length;
    if(5>=nLine){
        oldstr = str;
    }
    else{
        obj.blur();
        obj.value = oldstr;
    }
}
//-->
</script>
<form>
    <textarea cols="10" rows="6" onkeyup="chk(this);"></textarea>
    <textarea cols="10" rows="6" onkeyup="chk(this);"></textarea>
</form>


21:[質問] こねこ [2003/03/05 14:45 ]

教えて頂いたコードを実行したら、複数行にまたがって
改行しないでデータを入力した場合、テキストエリアに
undefinedと表示され、入力したデータが消えてしまい
ます。(下の実行結果参照)

この問題を解決するには、どのようにすれば宜しい
でしょうか?
ごだっちさん、続けてご指導宜しくお願いします。

[実行結果]
@表示行数5行(横幅の最大は全角で10文字)のテキストエリア
 に以下のように入力する。

 1
 2
 3
 4
 5あああああああああ
 あ(ここでキーアップする)

Aキーアップイベントが発生した時に、入力したデータが消え
 undefinedと表示される。(どの行を入力しても発生します。) 

 undefined


22:[回答] ごだっち [MAIL] [2003/03/05 15:18 ]

? undefined ?

>>20 のソースをそのまま使っていますか?

テキストエリアに「undefined」と表示されるということは、
それまで(5行以内のとき)の内容を保存さしているはずの
「oldstr」が定義されていないという事だと思われますが?


23:[質問] こねこ [2003/03/05 16:14 ]

ごだっちさんのコードをそのまま実行したら、確かにうまく
いきました。
このコードをもとに、私の環境で実行すると>>21の不具合が
発生します。
ソースの一部を公開しますので、誤りがあるところを教えて
下さい。
宜しくお願い致します。


<script language="javascript" type="text/javascript">
<!--
var oldstr;
function chk(obj){
   var str = obj.value;
   var nLine;
   var oRcts;
   var oTextRange = obj.createTextRange();
   oRcts = oTextRange.getClientRects();
   nLine = oRcts.length;
 //alert(nLine);
   if(30>=nLine){
       oldstr = str;
   }
   else{
       obj.blur();
       obj.value = oldstr;
     //alert("入力できるのは30行までです。");
   }
}
//-->
</script>

<form method="post" action="http://localhost:8080/test/test.jsp">
<textarea name="summary1" cols="76" rows="30" onkeyup="chk(this);"><%= disp_sum1 %></textarea>
</form>


24:[回答] ごだっち [MAIL] [2003/03/05 16:55 ]

ASPの書き出しが >>21 における「1〜5」で、かつ、ユーザー自身による入力が「あ」キーの押しっぱなしによる連続入力であるのならば、ユーザーがキーから手を離したときに最初のkeyupイベントが発生します。
そして、この時点で入力オーバーを生じていれば、「直前のkeyupイベント時において保存された内容」は存在せず、従ってoldstrの内容も無く、よって、テキストエリア内の表示が空白に戻ります。

これを回避するには、以下のようにテキストエリアにフォーカスが当たった時点の内容を、oldstrの最初の値として与えてしまうことでしょう。

<script language="javascript" type="text/javascript">
<!--
var oldstr;
function kpval(obj){
  oldstr = obj.value;
}
function chk(obj){
  var str = obj.value;
  var nLine;
  var oRcts;
  var oTextRange = obj.createTextRange();
  oRcts = oTextRange.getClientRects();
  nLine = oRcts.length;
//alert(nLine);
  if(5>=nLine){
      oldstr = str;
  }
  else{
      obj.blur();
      obj.value = oldstr;
    //alert("入力できるのは5行までです。");
  }
}
//-->
</script>

<form method="post" action="http://localhost:8080/test/test.jsp">
<textarea name="summary1" cols="10" rows="5" onkeyup="chk(this);" onfocus="kpval(this);"><%= disp_sum1 %></textarea>
</form>


25:[質問] こねこ [2003/03/06 09:17 ]

>>24で教えてもらいましたコードを実行したら、>>23について
はうまくできました。ありがとうございました。
このコードをもとに、私の環境で実行すると今度は以下の不具合
が発生します。

@最終行より前の行で複数行にまたがって改行しないでデータ
を入力した場合、最終行に自動的にカーソルが移動し、最終行が
入力できなくなる。

A最終行で改行し、その次の行で何か入力し(入力値は表示され
ない)BackSpaceキーを押すと画面が切り替わってしまう。

ソースの一部をまた公開しますので、誤りがありましたら
ご指摘下さい。
宜しくお願い致します。

<script language="javascript" type="text/javascript">
<!--
var oldstr;
function kpval(obj){
 oldstr = obj.value;
}
function chk(obj){
 var str = obj.value;
 var nLine;
 var oRcts;
 var oTextRange = obj.createTextRange();
 oRcts = oTextRange.getClientRects();
 nLine = oRcts.length;
//alert(nLine);
 if(30>=nLine){
     oldstr = str;
 }
 else{
     obj.blur();
     obj.value = oldstr;
     alert("入力できるのは30行までです。");
 }
}
//-->
</script>

<form method="post" action="http://localhost:8080/test/test.jsp">
<textarea name="summary1" cols="76" rows="30" onkeyup="chk(this);" onfocus="kpval(this);"><%= disp_sum1 %></textarea>
</form>


26:[回答] ごだっち [MAIL] [2003/03/06 10:10 ]

(1)は現象確認できません。
(2)もローカルでは確認できませんが、おそらくは、テキストエリアから外されたフォーカスがサブミットボタンかURL欄か、そのようなコントロールの何処かに行ってしまっていて、かつ、Backspaceを押したことでサーバーとの間で何らかの処理が走っているのだと思われます。

とりあえず、(2)に関しては、以下のようなソースで対応できるかと。

<script language="javascript" type="text/javascript">
<!--
var oldstr;
function kpval(obj){
oldstr = obj.value;
}
function chk(obj){
var str = obj.value;
var nLine;
var oRcts;
var oTextRange = obj.createTextRange();
oRcts = oTextRange.getClientRects();
nLine = oRcts.length;
//alert(nLine);
if(5>=nLine){
    oldstr = str;
}
else{
    document.forms[0].elements['dummy'].focus();
    obj.value = oldstr;
    // alert("入力できるのは30行までです。");
}
}
//-->
</script>

<form method="post" action="http://localhost:8080/test/test.jsp">
<textarea name="summary1" cols="10" rows="5" onkeyup="chk(this);" onfocus="kpval(this);"><%= disp_sum1 %></textarea>
<span style="position:absolute;left:-20;"><input type="text" name="dummy" id="dummy" size="1" onfocus="alert('入力できるのは30行までです。');"></span>
</form>

ただし、上記ソースだとタブキーなどによるフォーカス移動でも、'dummy'にフォーカスが当たるとアラートが表示されるので、実際にはスクリプト内のアラートを有効にして、'dummy'側のonfocusイベントを削ってください。

なお、上記のソースを単体で走らせて、(1)(2)のトラブルが発生するのであれば、回答例のソースを提示した者として解決策も考えられますが、受け手の側で改造・組み込みを行った結果によるトラブルについては、自身の責任で改造なり組み込みなりの加工をして頂けないでしょうか。
そちらの環境ではトラブルが起きると云われてしまいましても、環境依存のトラブルなら、環境を構築している方と相談されるのが宜しいかと。


27:[回答] ween [2003/03/06 10:33 ]

# 横からすみません。

思いついたんですが、こんなのどうでしょうか。

function chk ( obj ) {
 var range = obj.createTextRange();
 range.moveStart('character',range.text.length);
 while ( obj.clientHeight < obj.scrollHeight )
   range.moveStart('character',-1), range.text='';
}

少なくとも手元の環境(Win2K + IE6 + MS-IME2000)では
これでカーソル位置も維持できるし、IME周りの不具合も大分減るようです。
ただ、本当に不具合がないかどうかは私にはわからないです。
偶然上手くいってるだけかもしれないし、使っているIMEによっても違うかもしれません。
どっちにしろ、フォームの送信時や jsp 側でもチェックは必要でしょうし
リアルタイムの入力制限にはあまり固執しない方がいいように思います。


28:[質問] こねこ [2003/03/06 12:07 ]

サンプルを提示して頂きましてありがとうございました。
>>26のソースをローカルで確認しましたら、最終行で改行しないで
連続入力した場合に、この操作を2回連続して行うと表示行数以上
に入力できてしまいます。
これは、どうしてでしょうか?教えて下さい。

<script language="javascript" type="text/javascript">
<!--
var oldstr;
function kpval(obj){
oldstr = obj.value;
}
function chk(obj){
var str = obj.value;
var nLine;
var oRcts;
var oTextRange = obj.createTextRange();
oRcts = oTextRange.getClientRects();
nLine = oRcts.length;
//alert(nLine);
if(5>=nLine){
   oldstr = str;
}
else{
   document.forms[0].elements['dummy'].focus();
   obj.value = oldstr;
   alert("入力できるのは5行までです。");
}
}
//-->
</script>

<form>
<textarea name="summary1" cols="10" rows="5" onkeyup="chk(this);" onfocus="kpval(this);"></textarea>
<span style="position:absolute;left:-20;"><input type="text" name="dummy" id="dummy" size="1" );"></span>
</form>


29:[質問] こねこ [2003/03/06 14:08 ]

[weenさんへ]
提示してもらいましたコードを実行してみたら、確かに表示行数
以上に入力できないのは正しいのですが、例えば3行目で改行又は
改行しないで4行目まで連続して入力すると、元々5行目に入力した
内容が消えてしまいます。
これを回避するには、どうすればよいでしょうか?

[ごだっちさんへ]
>>25の質問Aについて、>>26で提示して頂いたコードを実行したら
BackSpaceキーで画面が切り替わることはなくなりました。
どうもありがとうございました。
>>28の質問について、何かわかりましたらご指導宜しくお願い致します。


30:[回答] ごだっち [MAIL] [2003/03/06 15:16 ]


>>28の現象は確認できました。が、原因は不明です。
半角英数入力では再現せず、全角入力でのみ発生する現象であることから、IME関連の仕様上の限界なのかも知れません。

ただ、とりあえず以下のスクリプトで回避できるようです。

なお、自動的に再入力モードに入るようにするには、chk()ファンクションの最終行付近にある「// editable();」 の行頭の「//」を削除してください。

==============================

<script language="javascript" type="text/javascript">
<!--
var str;
var oldstr;
var nLine;
var oRcts;
var oTextRange;
var mobj;

function kpval(obj){
 oldstr = obj.value;
}

function chk(obj){
 mobj = document.forms[0];
 str = obj.value;
 oTextRange = obj.createTextRange();
 oRcts = oTextRange.getClientRects();
 nLine = oRcts.length;
 if(5>=nLine){
   oldstr = str;
 }
 else{
   obj.blur();
   obj.disabled = true;
   mobj.elements['editbutton'].style.visibility='visible';
   alert('入力できるのは5行までです。');
   mobj.elements['editbutton'].focus();
   obj.value = oldstr.slice(0);
   // editable();
 }
}

function editable(){
 mobj = document.forms[0];
 var obj = mobj.elements['summary1'];
 obj.disabled=false;
 obj.focus();
 mobj.elements['editbutton'].style.visibility='hidden';
}
//-->
</script>

<form>
<textarea name="summary1" cols="10" rows="6" onkeyup="chk(this);" onfocus="kpval(this);">初期値</textarea><input name="editbutton" type="button" onclick="editable();" value="入力し直す" style="visibility:hidden;">
</form>
<br>
※入力可能な行数は5行です。<br>
 最下行は「余白」です。

==============================


31:[質問] こねこ [2003/03/06 17:33 ]

>>30のコードをローカルで実行したら、>>28で質問していたこと
ができました。ありがとうございました。

>>30のコードでは、最下行に「余白」があり、表示行数以上に入力
しようとしたら"入力し直す"ボタンが表示されますが、やはり
このようにしないと回避できないのでしょうか?
できれば、最下行の「余白」と"入力し直す"ボタンは表示させたく
ないのですが、この問題を解決する上で可能でしょうか?
ご指導宜しくお願いします。


32:[回答] ごだっち [MAIL] [2003/03/06 18:17 ]

もういいかな?

<script language="javascript" type="text/javascript">
<!--
var str;
var oldstr;
var nLine;
var oRcts;
var oTextRange;
var mobj;

function kpval(obj){
 oldstr = obj.value;
}

function chk(obj){
 var maxnum = obj.rows;
 var name = obj.name;
 mobj = document.forms[0];
 str = obj.value;
 oTextRange = obj.createTextRange();
 oRcts = oTextRange.getClientRects();
 nLine = oRcts.length;
 if(maxnum>=nLine){
   oldstr = str;
 }
 else{
   obj.blur();
   obj.disabled = true;
   mobj.elements['editbutton'].style.visibility='visible';
   alert('入力できるのは' + maxnum + '行までです。');
   mobj.elements['editbutton'].focus();
   obj.value = oldstr.slice(0);
   oTextRange.moveStart('character',oTextRange.text.length);
   while ( obj.clientHeight < obj.scrollHeight ){
     oTextRange.moveStart('character',-1), oTextRange.text='';
   }
   editable(name);
 }
}

function editable(name){
 mobj = document.forms[0];
 var obj = mobj.elements[name];
 obj.disabled=false;
 obj.focus();
 mobj.elements['editbutton'].style.visibility='hidden';
}
//-->
</script>

<form>
 <textarea name="summary1" cols="10" rows="5" onkeyup="chk(this);" onfocus="kpval(this);">初期値.1</textarea>
 <textarea name="summary2" cols="10" rows="5" onkeyup="chk(this);" onfocus="kpval(this);">初期値.2</textarea>
 <span style="position:absolute;left:-200;">
   <input name="editbutton" type="button" onclick="editable();" value="入力し直す" style="visibility:hidden;">
 </span>
</form>


33:[質問] こねこ [2003/03/06 18:50 ]

>>32のコードで目標としていたことは実現できました。
本当にどうもありがとうございました。

最後に、提示して頂いた>>32のコードでは、具体的にどのような
処理をしているのか教えて頂けませんでしょうか?

私自身、JavaScriptは、ほとんど経験ありませんので、どうぞ宜しく
お願い致します。



34:[質問] こねこ [2003/03/07 11:10 ]

>>32のコードの意味は大体わかりました。
ただ、わからなかったのは下記のコードです。
このコードが無くても正常に動作するように思うのですが
これは、どのようなことをしているのでしょうか?
度々、質問してしまい申し訳ございませんが、宜しくお願い
します。


oTextRange.moveStart('character',oTextRange.text.length);
  while ( obj.clientHeight < obj.scrollHeight ){
    oTextRange.moveStart('character',-1), oTextRange.text='';
  }


35:[完了] こねこ [2003/03/07 13:49 ]

>>34のコードを実行しないと、思ったとおり動かないこと
がわかりました。誤解してしまい、すみませんでした。
このコードをデバッグしながら実行したら、どのような
ことをしているのか理解できました。

ごだっちさん、weenさん、初心者の私に親切に教えてくれて
本当にありがとうございました。
心より感謝しています。
これからも宜しくお願いします。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World