- ベストアンサー
disabledの点で
- このソースを開いて、更新ボタンをクリックすると、２の方のテキストボックスが半透明になりますが、それは半透明にしないようにすることは可能なのでしょうか。
- お願いします。
- <html> <head> <title></title> <script language="JavaScript"> <!-- function setTF(){ if(document.form1.text1.value=="") document.form1.text2.disabled = true; else document.form1.text2.disabled = false; } //--> </script> </head> <body> <form name="form1"> １<INPUT type="text" name="text1" onChange="setTF()"> ２<INPUT type="text" name="text2" disabled> <INPUT type="submit" value="登録" onClick="return setTF()" name="submit"> </form> </body> </html>
- tohiyo
- お礼率63% (57/90)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ブラウザの種類が記されていませんが、 IEでのことでしょうか？ IEの場合、disableの色が半透明になるのはIEの仕様だったかと思います。 NNやOperaなど、他のブラウザでは半透明になるとは限りません。 そこで、IE限定の方法をお話します。 IE独自のプロパティとして、readOnlyプロパティがあります。 このようにして使用します。 form1.text1.readOnly = true; この方法だと色が半透明になりません。 ただし、IE以外ではエラーが発生しますのでご注意ください！（IE独自なので、ほかのブラウザでエラーが発生するのはあたりまえなんですが…） なので、実際は、disableを利用するか、readOnlyを利用するかは、まずブラウザの判定をする必要があると思います。 以下を参考にしてみてください。 ------------------------ <script type="text/javascript"> function setTF(){ var strClType = ""; var bolDisable; /* クライアント情報取得 */ strClType = navigator.appName; /* 表示設定 */ if(document.form1.text1.value=="") { bolDisable = true; } else { bolDisable = false; } /* 表示 */ switch (strClType.substr(0,1) { case "M": //Internet Exploler document.form1.text2.readOnly = bolDisable; break; default: //その他 document.form1.text2.disabled = bolDisable; } } </script> …… --------------------------------------- 上記では、判断の簡易版として頭１文字で判断させていますが、厳密にはきちんと判断させるべきです。 あと、いまさくっと書いたので、一部誤りがあるかもしれませんが、ご容赦ください。
その他の回答 (1)
- urusyun
- ベストアンサー率52% (10/19)
>form1.text1.readOnly = true; >の一文を入れるだけでは今と変わらないのですが、 すみません、言葉が不足していました。 ＞２<INPUT type="text" name="text2" disabled> からdisabled属性を削除してください。 かわりに、bodyタグにonLoadイベントを追加してみてください。 こんな感じです。 ------------------------ <body onLoad="setTF()"> <form name="form1"> １<INPUT type="text" name="text1" onChange="setTF()"> ２<INPUT type="text" name="text2"> <INPUT type="submit" value="登録" onClick="return setTF()" name="submit"> </form> </body> ----------------------------------- ポイントを説明すると、 JavaScriptのdisabled プロパティは 該当するHTMLのdisabled属性に対応しています。 つまり、 document.form1.text2.disabled = false; は、 <INPUT type="text" name="text2" disabled="false"> と書き換えていると思ってもらってよいです。 （厳密には違いますが） なので、readOnlyのみ変更しても、 htmlでdisabledが指定されていれば、 二重指定（disabled + readOnly)になるだけなのです。 （こんな感じです： <INPUT type="text" name="text2" disabled readOnly> ) 私としては、IEではreadOnlyを、他のブラウザでは disabledを利用して、という意味だったのですが、 説明不足でしたね。 混乱させてすみませんでした。
お礼
説明かなりわかりやすかったです、ありがとうございました。
補足
IEの場合でした。form1.text1.readOnly = true; の一文を入れるだけでは今と変わらないのですが、 他も変える必要があるのでしょうか？すみません、初心者なもので。