入力できないテキストボックスを以下のように「disabled」属性を使って表示すると灰色の文字列が表示され、非常に見にくくなります。
<input type="text" name="name" size="30" maxlength="20" value="文字列" disabled>
これを「見やすく」表示する方法を教えてください。
以下の２つの観点でお願いします（両方でも片方でも可）。
●端末側の設定でなんとかする方法
・Windowsの画面のプロパティをいじってなんとかする
・実はIEの隠し属性があり、それをいじると見やすくなる
などなど・・・
●サーバ側で上記タグを変更する方法
・disabledの代わりにreadonlyを使えばいいことは既知、それ以外に何か属性はないか？
・テキストボックスを使うことは大前提なので不可避です
No.1
505
61
30pt
JavaScriptの使用は駄目でしょうか？
<!--入力しようとしてもフォーカスが外れて入力不可のテキストボックス-->
<input type="text" onFocus="this.blur();">
No.2
1314393
30pt
JavaScript を使用すれば、任意の色に設定することが可能です。
ご参考までに。
<html>
<head>
<script janguage="javascript">
<!---
function setDisableColor() {
document.myForm.name.style.backgroundColor='#F0C0E0';
}
--->
</script>
</head>
<body onload='setDisableColor();'>
<form name="myForm">
<input type="text" name="name" size="30" maxlength="20" value="文字列" disabled>
</form>
</body>
</html>
かなり近いです。これだと文字が灰色のままなので、まだ見づらいですよね。
この手法で、背景ではなく、文字列の色の指定はできませんか？
回答可能回数を5回に増やしました。
No.3
1314393
20pt
disabled でないときの文字色の指定は style.color で指定できますが、disabled の時には灰色になってしまいます。
背景色を明るくし、コントラストをつけることで回避できないでしょうか。
document.myForm.name.style.backgroundColor='#F8F8F0';
くらいだと、字は読みずらくない気がします。
あるいは、llusall さんの方法とミックスして、表示色と背景色を指定し、選択できないようにすれば、ご希望の挙動に近くなると思います。
#動作はしましたが、script タグのオプションはlanguage でした。
#お恥ずかしい、間違いで失礼しました。
readonlyを使いたくなかった理由が、入力不可のテキストボックスと入力可のテキストボックスが見た目で区別できなくなるから、だったのですが、文字列の色が変えられるなら、それで区別させればいいですね。
なるほど、とりあえず解決です。
ただ、フォームの中の部品ひとつひとつに対してこの設定をしていかないといけないのが大変ですね。
今改造しようとしているシステムは、1画面あたり何十個も部品があり、そういう画面が何十枚もあります。
もっとIEの隠し属性みたいなので、一発で色換えする方法はないでしょうか？
No.4
234
200pt
スタイルシートとJavascriptの組み合わせでどうでしょうか?
まえの人のソースをちょっと利用して，
<html>
<head>
<style>
.ReadOnly
{
color: #000000;
background-color: #d6d3ce
}
</style>
</head>
<body>
<form>
<input class="ReadOnly" type="text" size="30" maxlength="20" value="文字列" onFocus="this.blur();" >
</form>
</body>
</html>
スタイルシートのヘルプはこちらでどうでしょう。
無知で申し訳ありません。ちょっとだけ解説お願いできないでしょうか。
この２行↓
<style>
No.5
52
20pt
こんにちは、
入力不可を「見やすく」表示する方法ということで、
CSSで枠をドットにしてみました。
IEの場合、文字色の指定が効かないので、背景色を明るめにしています。
<input type="text" name="name" size="30" maxlength="20" value="文字列" style="background-color:#EEEEEE;color:#6666FF;border:1px dotted gray;" disabled>
colorを設定されていますが、disabledなので文字は灰色のままですね。
けど、disabledの代わりにreadonlyを使えばこの手法は有効ですね。
なるほど、JavaScriptを使わなくてもこれで十分な気もします。
あと、「見やすく」というのは、「入力不可であることを分かり易く」という意味ではなく、「テキストボックス内の文字列が読みやすい」という意味です。
No.6
534
50pt
内容から、Win+IE限定で考えてみましたが。
本質的には
http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/re...
に、「DISABLED・・・エレメントを無効にする。そのエレメントをグレー表示することで、フォーカスを受け付けないようにできる。」
と書かれているので仕様的に無理かもしれませんね。
代替策として他の方と同様javascriptで
<input type="text" id="a" value="a" onfocus="hoge(this)">
<input type="text" id="b" value="b" onfocus="hoge(this)">
<script language="javascript"><!--</p> <p>function hoge(targetInput){</p> <p> var arr = document.getElementsByTagName('input');</p> <p> if(arr.length > 0){</p> <p> for(var i = 0; i < arr.length; i++){</p> <p> if(arr[i] == targetInput){ </p> <p> arr[i].disabled = true; </p> <p> }else{</p> <p> arr[i].disabled = false; </p> <p> }</p> <p> }</p> <p> }</p> <p>}</p> <p>--></script>
focusが当たっている所だけはグレーになる他、挙動制御が厄介ですが。参考になれば。
JavaScriptをよく知らないので質問させてください。
この記述により、
・フォーカスが当たっていないときは通常のテキストボックスに見える
・フォーカスが当たるとdisabledになる
ということでしょうか？
No.7
657
2pt
CSSで
background-color : white;
を使用してはどうでしょうか？
これは、「テキストボックスの背景色を白にすれば灰色の文字でも読みやすくなるのでは？」という提案でしょうか？
（コードだけではなく、意図も書いていただけると助かります ＞ 皆様）
残念ながら、もともと背景は白で、白地に灰色の文字が読みづらい、というクレームを受けています。
No.8
35468
200pt
やはりIEを考慮するとreadonlyを使うのが良いと思います。
（IE以外のブラウザであれば、
disabledのものでもCSSでinput[disabled]のcolorを変更すれば文字色を変えられるのですが）
readonly用のクラスを作成。
disabledをreadonlyに変更し、classにreadonly用のクラスを指定。
これでclass="ReadOnly"としたすべての要素の文字色と背景色が設定できます。
スタイルシートを覚えると便利ですよ。
http://desperadoes.biz/style/base/index.php
40
39
<html>
<head>
<style>
.ReadOnly
{
color: #000000;
background-color: #d6d3ce
}
</style>
</head>
<body>
<input class="ReadOnly" readonly type="text" size="30" maxlength="20" value="文字列" >
<input class="ReadOnly" readonly type="text" size="30" maxlength="20" value="文字列" >
</body>
</html>
なるほど。よーく分かりました。ありがとうございます。
これ以降は、端末側の設定でdissabled属性の設定されたテキストボックスの灰色の文字が読みやすくなるようにするにはどうするか、についての回答をお願いします。
No.9
46069
50pt
質問意図から外れると思いますが、提案を一つ。
入力不可であるのに、テキストフィールドでなければならに理由とは？
フォームを作成する際にループ等で出力しており、条件に合ったフィールドのみ属性を追加するというような処理の為でしょうか？
状況によりますが、多少の工夫で ＜input type="text" ...を＜div class="" ... に書換えられると思うのすが。
disable 属性を指定していたという事は、フォームを受取る側ではその内容は無視しているようですし。
＜style type="text/css">
＜!--
div.disable {
border: 2px inset;
width: 10em;
}
-->
＜/style>
＜div class="disable">文字列＜/div>
として、テキストフィールドな見た目の単なるブロック要素というのはどうでしょうか？
他の（本当の）フィールドと区別できるように、お好きな修飾をwidth の下に追加すればいいでしょう。色とか背景とか書体とか...
３番のコメントに「今改造しようとしているシステムは、1画面あたり何十個も部品があり、そういう画面が何十枚もあります。」と書いたように、現在稼動中のシステムの改修（灰色文字が見にくいというクレームに対する）ですので、なるべく既存のソースを活かす改修にしたいのです。
今後の開発の参考とさせていただきます。ありがとうございます。
No.10
1314393
30pt
#2,#3 の再回答です（ポイントは、最初のものだけで結構です。）
disabled のステータスは入力中に変わらないのでしょうか？
動的に変えようとするのであれば、JavaScript を使用する方法になると思います。
静的で変わらないのであれば
#4 のbankband さんや他の方もいっているスタイルシートを使用する方法が、後からの変更に修正に対して柔軟だと思います。
スタイルシートは、<style>～</style> でタグに対してデフォルトの設定を行うことも出来ますし、
<style>
<!--
input {color:blue;}
-->
</style>
自分で定義したスタイルを、class で指定して使用することもできます。
<style>
<!--
.myClass {color:rgb(0,255,0);}
-->
</style>
<input class="myClass" type="text">
ネットで探せば、いろいろな用法が見つかりますが、「スタイルシート辞典」
http://www.amazon.co.jp/gp/search/ref=nb_ss_gw/249-4528721-26875...
のような本が一冊あると便利です。
解説どうもありがとうございます。よく理解できました。
実は、この既設のシステムでは既にスタイルシートが使われているので、この方法が一番相性がいいと思いました。
これ以降は、端末側の設定の変更だけで、dissabled属性の設定されたテキストボックスの灰色の文字が読みやすくなるようにするにはどうするか、についての回答をお願いします。 ＞ 皆様
1
1
1
1
1
なるほど～。
すいません、要件追加です。
・入力不可のテキストボックスと入力可のテキストボックスが見た目で区別できる状態は維持する
今回の回答はそれからはずれますよね？
後付けの条件、すいません。