WEB相談室

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

タイトル:テキストボックスの入力制限

0:[投稿] ピルグリム [2002/08/06 13:27 ][環境:WIN+IE WIN系+Java]

はじめまして。いつもいろいろ参考にさせていただいております。
ご質問なのですが、条件付きでテキストボックスを入力不可・可にする場合、チェックボックスが条件ではうまくいくのですが、ラジオボタンまたはセレクトメニュを条件にするとどうもうまくいきません。
やりたいことは、通常はテキストボックスは入力不可の状態(readOnly or disabled or blur)にしておいて、ラジオボタンの特定の選択肢にチェックが付くと入力可能になる、またはセレクトメニュの特定の選択肢が選択されると入力可能になるといった具合です。ラジオボタンの場合、過去ログにもあるようにJavaScriptでチェックボックスの際と同じように書いてみたところ、指定のラジオボタンを複数回選択すると入力可・不可の繰り返しになってしまいます。セレクトメニュに関してはもう降参状態です。どうかよろしくお願いいたします。


1:[回答] ひよこ [2002/08/06 22:43 ]

こんなんでどうでしょう。
<HTML><HEAD><title>test</title>
<SCRIPT language=JavaScript> <!--
function chg1(){
    if(document.fm.sl1.value==1){
        document.fm.text1.disabled = false;
    }else{
        document.fm.text1.disabled = true;
    }
    if(document.fm.sl1.value==2){
        document.fm.text2.disabled = false;
    }else{
        document.fm.text2.disabled = true;
    }
    if(document.fm.sl1.value==3){
        document.fm.text3.disabled = false;
    }else{
        document.fm.text3.disabled = true;
    }
}

function chg2(bool){
    document.fm.text4.disabled = bool;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<form name="fm">
    <select name="sl1" onChange= "chg1();">
        <option value="0">選択してください</option>
        <option value="1">textbox1で入力</option>
        <option value="2">textbox2で入力</option>
        <option value="3">textbox3で入力</option>
    </select>
    <br>
    TEXTBOX1<input type="text" name="text1"><br>
    TEXTBOX2<input type="text" name="text2"><br>
    TEXTBOX3<input type="text" name="text3"><br>
    <br>---------------------------------------------<br>
    <input type="radio" name="rd1" onclick="chg2(false);" checked>入力可 
    <input type="radio" name="rd1" onclick="chg2(true);">入力不可 
    <input type="text" name="text4">
</form>
</BODY>
</HTML>

注:ブラウザチェックはしてないです。


2:[関連] ピルグリム [2002/08/07 12:09 ]

ひよこ様、どうもありがとうございました。
うまくいきました。(ブラウザはI.E)
開いたときに入力可能な状態だったので各テキストボックスに "disabled" を加えました。
ところで欲が出てきまして、入力可と不可の状態でテキストボックスの色を変えることと、入力可能な状態で入力した内容がやっぱり入力不可にしたとき消えるようにしてみました。
ひよこさんのソースを参考に書いてみまして一応動くのですが、おかしなところとかこのほうがいいよ、というところがあればご指摘いただければ幸いです。
いままで自分の書いたソースを人に見てもらう機会がほとんどなかったものですから。
よろしくお願いします。
----------------------------------------------------------

<HTML><HEAD><title>test</title>

<style type="text/css">
<!--
.formcolor{
  background-color:#E6E6FA; //スタイルシートでフォームの色を指定
  color:#4b0082;
}
-->
</style>

<SCRIPT language=JavaScript> <!--
function chg1(){
   if(document.fm.sl1.value==1){
       document.fm.text1.disabled = false;
    document.fm.text1.style.backgroundColor="white";
   }else{
       document.fm.text1.disabled = true;
    document.fm.text1.style.backgroundColor="#E6E6FA";
    document.fm.text1.value="";
   }
   if(document.fm.sl1.value==2){
       document.fm.text2.disabled = false;
    document.fm.text2.style.backgroundColor="white";
   }else{
       document.fm.text2.disabled = true;
    document.fm.text2.style.backgroundColor="#E6E6FA";
    document.fm.text2.value="";
   }
   if(document.fm.sl1.value==3){
       document.fm.text3.disabled = false;
    document.fm.text3.style.backgroundColor="white";
   }else{
       document.fm.text3.disabled = true;
    document.fm.text3.style.backgroundColor="#E6E6FA";
    document.fm.text3.value="";
   }
}

function chg2(bool){
   document.fm.text4.disabled = bool;
}


//テキストボックスの色を条件指定
function color(){
 document.fm.text4.style.backgroundColor="white";
}
function color2(){
 document.fm.text4.style.backgroundColor="#E6E6FA";
}


//入力不可のラジオボタンにチェックの場合、テキストボックスの入力データを消す
function kara(){
 document.fm.text4.value="";
}
 

//-->
</SCRIPT>

</HEAD>
<BODY>
<form name="fm">
   <select name="sl1" onChange= "chg1();">
       <option value="0">選択してください</option>
       <option value="1">textbox1で入力</option>
       <option value="2">textbox2で入力</option>
       <option value="3">textbox3で入力</option>
   </select>
   <br>
   TEXTBOX1<input type="text" name="text1" disabled CLASS="formcolor"><br>
   TEXTBOX2<input type="text" name="text2" disabled CLASS="formcolor"><br>
   TEXTBOX3<input type="text" name="text3" disabled CLASS="formcolor"><br>
   <br>---------------------------------------------<br>
   <input type="radio" name="rd1" onclick="chg2(false);color()">入力可 
   <input type="radio" name="rd1" onclick="chg2(true);color2();kara()" checked>入力不可 
   <input type="text" name="text4" CLASS="formcolor" disabled>
</form>
</BODY>
</HTML>


3:[回答] ひよこ [2002/08/07 14:58 ]

特に問題はなさそうです。
関数は少し整理できますね。

function chg2(bool){
  obj = eval("document.fm.text4");
  obj.disabled = bool;
  //テキストボックスの色を条件指定
  obj.style.backgroundColor = (bool)?"#E6E6FA":"white";
  //入力不可のラジオボタンにチェックの場合、テキストボックスの入力データを消す
  if(bool){obj.value = "";}
}

ラジオボタン側もchg2()を呼ぶだけです。
  <input type="radio" name="rd1" onclick="chg2(false);">入力可 
  <input type="radio" name="rd1" onclick="chg2(true);" checked>入力不可 

chg1()も工夫すれば整理できますが今回は割愛(^^;
textboxが極端に多いときはforループを使うなどして整理した方が
良いかも知れません。


4:[完了] ピルグリム [2002/08/07 15:22 ]

ひよこ様
ご回答感謝します。
やはりだらだら書いている感はいなめないようですね。
あとで見て分かりやすくするためにも整理する必要がありそうです。
forループについてもしっかり勉強します。VBも中途半端なものですから。。
どうもありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World