スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
【--/--/-- --:--】 | スポンサー広告
disabledにしてグレーになったelementの色を変えるjavascriptかcssはあるのか?
閲覧時は編集されたくないけど、グレー表示は見づらいから嫌だ!
というのは建前で、本当は編集用と閲覧用で2種類のHTMLを書くのが
面倒だからreadonlyとかdisabledくらいで済ませたい!というのが
本音でした(^^;

簡単なのは属性でreadonlyにしてしまうこと。つまり
<input type="text" readonly>
編集できない、色も変わらない。
でも!text,textarea以外だとreadonlyが使えない?
だめです。次。

だったらdisabledにすればいいじゃん!ってことでこちら。
<input type="radio" disabled>
おー、編集できない、けど色がグレー。
これも見づらいので却下。最悪これになるかもしれないけどね。

じゃあcssで色を変えちゃえばいいのか?
<input type="radio" disabled style="backgroundcolor:white;">
だめです。disabledにするとcssも受け付けてくれません。がっかり。

そもそもreadonlyで色変えなかったんだからdisabledでも色変えなくていいのに→各ブラウザ。
変えたかったら自分でcssで変えます。変えさせてください。
とか言っても始まらないのでとりあえずgoogleとかで先達の知恵をしばし検索。。。
。。。
だめorz

ちなみに個人的に代表的だと思うブラウザでdisabled時の色を調べてみると、
textとtextareaはどのブラウザも背景色が薄いグレーで、前景色は濃い目のグレー。
text系以外はIEだと背景色は変わらず(白)、前景色はグレー、
FirefoxとOperaは背景色が薄いグレーで、前景色は濃い目のグレー。

それならと思って、javascriptで各エレメントのonfocusでdisabled=trueにして、onblurでdisabled=falseにしてみました。
結果は1勝2敗です(^^;
Operaはonblurが発生してdisabledは解除されるけど、
IEとFireFoxはonblurイベントが発生しないためdisabledが解除されず。

しょーがないので無理やりtimeoutで解除!
var curElm;
text1.onfocus = function(){
 curElm=this;
 setTimeout("curElm.disabled=false;", 100);
 this.disabled=true;
}
まぁまぁいいかな?
でもTabキーとかでフォーカスを高速に移動されると、
タイムアウトでcurElm.disabled=falseが実行される前にcurElmが次のエレメントになっちゃうんでだめ。

だったらcurElmを配列にして貯めておいて、
timeoutしたときに貯まってるエレメントをまとめて解除すればいいでしょ!
というわけで、こちら。
var curElms = new Array();
text1.onfocus = function(){
 curElms.push(this);
 setTimeout(
  "while(curElms.length){" +
  " var curElm = curElms.pop();" +
  " curElm.disabled=false;" +
  "}"
 );
 this.disabled=true;
}
なかなか良い感じになりました。

あれ、でもタイムアウトする前にフォーカスが移るのが問題なら
適当に100msにしていたのを1msとかにするだけでもOK?
var curElm;
text1.onfocus = function(){
 curElm=this;
 setTimeout("curElm.disabled=false;", 1);
 this.disabled=true;
}
・・・OKでした(^^;
まぁ、1msでもフォーカス移動される可能性が無くは無いかもしれないので、とりあえず配列バージョンを採用することに決定。

あと1つ、checkboxの場合timeoutを短くしすぎるとclickイベントが
timeoutの後に発生するらしくてうまくいかない。
前述の配列バージョンならtimeoutを長くしてもいいけど、
あんまりフォーカス移動から遅れてグレー解除されるのも気持ち悪いので
clickを無効にしておくことにしましょうか。
checkbox1.onclick=function(){return false;}
後はこれをページのonLoadのときに、全エレメントに対して行えば
閲覧専用ページの完成かなと。

でも他にいい方法があったら教えてください。
スポンサーサイト

テーマ:プログラミング - ジャンル:コンピュータ

【2008/02/23 07:53】 | JavaScript | トラックバック(0) | コメント(1)
リアルシステムズ      情報工学技術士事務所


情報工学部門の独立技術士が思うこと

ブログ内検索

カテゴリー

プロフィール

佐藤 誉範

Author:佐藤 誉範
リアルシステムズ

平成3年からソフトハウスでシステム構築を行ってきました。
平成15年に技術士(情報工学部門)の資格を取得し、独立してリアルシステムズを創業。

情報システム構築に関することなら
どんなご相談にも親身に対応させていただきます。
一緒により良いシステムを考えましょう!

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

天気予報

リンク

このブログをリンクに追加する

RSSフィード

ブロとも申請フォーム

この人とブロともになる

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。