【ずばりには500ポイント】

入力できないテキストボックスを以下のように「disabled」属性を使って表示すると灰色の文字列が表示され、非常に見にくくなります。
<input type="text" name="name" size="30" maxlength="20" value="文字列" disabled>

これを「見やすく」表示する方法を教えてください。

以下の2つの観点でお願いします(両方でも片方でも可)。

●端末側の設定でなんとかする方法
・Windowsの画面のプロパティをいじってなんとかする
・実はIEの隠し属性があり、それをいじると見やすくなる
などなど・・・

●サーバ側で上記タグを変更する方法
・disabledの代わりにreadonlyを使えばいいことは既知、それ以外に何か属性はないか?
・テキストボックスを使うことは大前提なので不可避です

回答の条件
  • 1人5回まで
  • 登録:2006/07/26 17:17:18
  • 終了:2006/07/27 15:30:08

回答(10件)

id:llusall No.1

llusall回答回数505ベストアンサー獲得回数612006/07/26 17:39:34

ポイント30pt

JavaScriptの使用は駄目でしょうか?


テキストボックスを入力不可にする


<!--入力しようとしてもフォーカスが外れて入力不可のテキストボックス-->

<input type="text" onFocus="this.blur();">

id:t-ueno

なるほど~。

すいません、要件追加です。

・入力不可のテキストボックスと入力可のテキストボックスが見た目で区別できる状態は維持する

今回の回答はそれからはずれますよね?

後付けの条件、すいません。

2006/07/26 17:52:16
id:Mook No.2

Mook回答回数1312ベストアンサー獲得回数3912006/07/26 17:46:39

ポイント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>

id:t-ueno

かなり近いです。これだと文字が灰色のままなので、まだ見づらいですよね。

この手法で、背景ではなく、文字列の色の指定はできませんか?

回答可能回数を5回に増やしました。

2006/07/26 18:00:12
id:Mook No.3

Mook回答回数1312ベストアンサー獲得回数3912006/07/26 18:12:13

ポイント20pt

disabled でないときの文字色の指定は style.color で指定できますが、disabled の時には灰色になってしまいます。

背景色を明るくし、コントラストをつけることで回避できないでしょうか。

document.myForm.name.style.backgroundColor='#F8F8F0';

くらいだと、字は読みずらくない気がします。

あるいは、llusall さんの方法とミックスして、表示色と背景色を指定し、選択できないようにすれば、ご希望の挙動に近くなると思います。

#動作はしましたが、script タグのオプションはlanguage でした。

#お恥ずかしい、間違いで失礼しました。

id:t-ueno

readonlyを使いたくなかった理由が、入力不可のテキストボックスと入力可のテキストボックスが見た目で区別できなくなるから、だったのですが、文字列の色が変えられるなら、それで区別させればいいですね。

なるほど、とりあえず解決です。

ただ、フォームの中の部品ひとつひとつに対してこの設定をしていかないといけないのが大変ですね。

今改造しようとしているシステムは、1画面あたり何十個も部品があり、そういう画面が何十枚もあります。

もっとIEの隠し属性みたいなので、一発で色換えする方法はないでしょうか?

2006/07/26 18:28:18
id:bankband No.4

bankband回答回数23ベストアンサー獲得回数42006/07/26 18:19:17

ポイント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>

スタイルシートのヘルプはこちらでどうでしょう。

http://www.htmq.com/

id:t-ueno

無知で申し訳ありません。ちょっとだけ解説お願いできないでしょうか。

この2行↓

<style>2006/07/26 18:59:44

id:oisin No.5

oisin回答回数5ベストアンサー獲得回数22006/07/26 18:21:33

ポイント20pt

こんにちは、

入力不可を「見やすく」表示する方法ということで、

CSSで枠をドットにしてみました。

IEの場合、文字色の指定が効かないので、背景色を明るめにしています。

<input type="text" name="name" size="30" maxlength="20" value="文字列" style="background-color:#EEEEEE;color:#6666FF;border:1px dotted gray;" disabled>
id:t-ueno

colorを設定されていますが、disabledなので文字は灰色のままですね。

けど、disabledの代わりにreadonlyを使えばこの手法は有効ですね。

なるほど、JavaScriptを使わなくてもこれで十分な気もします。

あと、「見やすく」というのは、「入力不可であることを分かり易く」という意味ではなく、「テキストボックス内の文字列が読みやすい」という意味です。

2006/07/26 19:08:43
id:kibitaki No.6

kibitaki回答回数53ベストアンサー獲得回数42006/07/26 18:25:39

ポイント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が当たっている所だけはグレーになる他、挙動制御が厄介ですが。参考になれば。

id:t-ueno

JavaScriptをよく知らないので質問させてください。

この記述により、

・フォーカスが当たっていないときは通常のテキストボックスに見える

・フォーカスが当たるとdisabledになる

ということでしょうか?

2006/07/26 19:06:47
id:zebevogue No.7

zebevogue回答回数65ベストアンサー獲得回数72006/07/26 18:29:16

ポイント2pt

CSSで

background-color : white;

を使用してはどうでしょうか?

id:t-ueno

これは、「テキストボックスの背景色を白にすれば灰色の文字でも読みやすくなるのでは?」という提案でしょうか?

(コードだけではなく、意図も書いていただけると助かります > 皆様)

残念ながら、もともと背景は白で、白地に灰色の文字が読みづらい、というクレームを受けています。

2006/07/26 19:11:19
id:KirakiraHikaru No.8

KirakiraHikaru回答回数354ベストアンサー獲得回数682006/07/26 19:34:12

ポイント200pt

やはりIEを考慮するとreadonlyを使うのが良いと思います。

(IE以外のブラウザであれば、

disabledのものでもCSSでinput[disabled]のcolorを変更すれば文字色を変えられるのですが)


readonly用のクラスを作成。

disabledをreadonlyに変更し、classにreadonly用のクラスを指定。

これでclass="ReadOnly"としたすべての要素の文字色と背景色が設定できます。


スタイルシートを覚えると便利ですよ。

http://desperadoes.biz/style/base/index.php

<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>
id:t-ueno

なるほど。よーく分かりました。ありがとうございます。

これ以降は、端末側の設定でdissabled属性の設定されたテキストボックスの灰色の文字が読みやすくなるようにするにはどうするか、についての回答をお願いします。

2006/07/26 20:24:48
id:tezcello No.9

tezcello回答回数460ベストアンサー獲得回数692006/07/26 20:20:12

ポイント50pt

質問意図から外れると思いますが、提案を一つ。


入力不可であるのに、テキストフィールドでなければならに理由とは?

フォームを作成する際にループ等で出力しており、条件に合ったフィールドのみ属性を追加するというような処理の為でしょうか?


状況によりますが、多少の工夫で <input type="text" ...を<div class="" ... に書換えられると思うのすが。

disable 属性を指定していたという事は、フォームを受取る側ではその内容は無視しているようですし。


<style type="text/css">

<!--

div.disable {

border: 2px inset;

width: 10em;

}

-->

</style>

<div class="disable">文字列</div>


として、テキストフィールドな見た目の単なるブロック要素というのはどうでしょうか?

他の(本当の)フィールドと区別できるように、お好きな修飾をwidth の下に追加すればいいでしょう。色とか背景とか書体とか...

id:t-ueno

3番のコメントに「今改造しようとしているシステムは、1画面あたり何十個も部品があり、そういう画面が何十枚もあります。」と書いたように、現在稼動中のシステムの改修(灰色文字が見にくいというクレームに対する)ですので、なるべく既存のソースを活かす改修にしたいのです。

今後の開発の参考とさせていただきます。ありがとうございます。

2006/07/26 20:32:44
id:Mook No.10

Mook回答回数1312ベストアンサー獲得回数3912006/07/26 20:22:34

ポイント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...

のような本が一冊あると便利です。

id:t-ueno

解説どうもありがとうございます。よく理解できました。

実は、この既設のシステムでは既にスタイルシートが使われているので、この方法が一番相性がいいと思いました。

これ以降は、端末側の設定の変更だけで、dissabled属性の設定されたテキストボックスの灰色の文字が読みやすくなるようにするにはどうするか、についての回答をお願いします。 > 皆様

2006/07/26 20:37:12

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません