人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

●質問者: t-ueno
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:Disabled IE Windows サーバ タグ
○ 状態 :終了
└ 回答数 : 10/10件

▽最新の回答へ

1 ● llusall
●30ポイント

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


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


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

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

◎質問者からの返答

なるほど?。

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

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

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

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


2 ● Mook
●30ポイント

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回に増やしました。


3 ● Mook
●20ポイント

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

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

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

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

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

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

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

◎質問者からの返答

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

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

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

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

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


4 ● bankband
●200ポイント

スタイルシートと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/

◎質問者からの返答

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

この2行↓

<style>


5 ● oisin
●20ポイント

こんにちは、

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

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を使わなくてもこれで十分な気もします。

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


1-5件表示/10件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ