- ベストアンサー
[Javascript]テキストボックスにフォーカスが来たら色を変えたい。
こんばんわ。 テキストボックスなどにフォーカスが当たったら、そのテキストボックスの背景色を変えたいのです。 onForcus と style を組み合わせてイロイロしましたがダメでした・・・。 onfocus=""とonblur=""で動きを認識して・・・ style="background-color : aqua;" や style="background-color : white;" で背景色を変えたいのですが・・・。 宜しくご伝授くださいませ。
- zenon55
- お礼率15% (59/381)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
JavaScriptでCSSのプロパティを操作するには、 <オブジェクト>.style.<スタイル名> のように使います。 <form> <input type="text" style="background-color: white;" onfocus="this.style.backgroundColor='aqua';" onblur="this.style.backgroundColor='white';" /> </form> 上の例ではthisで自分自身のオブジェクト（=input）を参照させていますが、そうしたくない場合、 document.forms[n].elements[n] のようにするか、 formやinputにそれぞれ名前をつけて参照しましょう。
関連するQ&A
- テキストボックスいくつかのうち１つだけフォーカス
input:focus{background-color:yellow;border-color:red;} はできますが、 テキストボックスいくつかのうち１つだけフォーカス時に色を付ける方法はありますか？ よろしくお願いします。
- ベストアンサー
- CSS
- テキストボックスの背景色変更時に影ができてしまう
テキストボックス選択時に背景色をJavaScriptで変更したく、下記のように書きました。 <input type="text" value="テキストボックスです" onfocus="this.style.backgroundColor='#cccccc'" onblur="this.style.backgroundColor='#ffffff'"> これをWindowsXP＋IE6で実行したところ、背景色の処理はうまくいくのですが、画面のプロパティのテーマがデフォルトのWindowsXPの場合、元は影のないテキストボックスなのですが、背景色変更時に影つきのテキストボックスになってしまいます。 テーマがWindowsクラシックだと元々影つきなので変化しません。 背景色変更時に影つきにならないようにできませんでしょうか？ それともこれはIE6のバグなのでしょうか？
- ベストアンサー
- JavaScript
- javascriptテキストBOX色を元に戻したい
f.txtbox.style.backgroundColor = 'red'; このようにしてチェックボックスをクリックすると、あるテキストボックスの背景色が変わるようにしたのですが、 変える前のデフォルトのテキストボックス背景色に戻す（デフォルトに戻す）にはどうすればいいですか？ #ffffffにする以外どうすればいいでしょうか？
- ベストアンサー
- JavaScript
- フォーカス移動抑止について
お世話になっております。 ブラウザの画面項目（テキストボックス等）間でフォーカスを移動する場合、移動元でonblur、移動先でonfocusが発生しますが、移動元のonblurで、特定の条件の場合だけフォーカス移動を抑止し、移動先onfocusを発生させないようにしたいのですが、何か方法はないでしょうか？ 【環境】 ・IE6 【現在うまくいっていない方法】 現在、フォーカス移動を抑止するため、移動元のonblur内の処理で、「event.srcElement.focus()」を実行してますが、移動先のonfocus()も走ってしまう。（２回フォーカス移動することで元の画面項目にフォーカスが戻る） 【補足】 ・問題になっているのは、画面項目のonblur、onfocusで入力値のチェックや他画面項目との連動、色変更、エラーメッセージ表示等を行っておりonblurやonfocusが何度も走ってしまうと想定外の動きをしてしまいます。（場合によってはフォーカス移動の無限ループ） ・グローバル変数を屈指すれば想定外の動きをしないようにすることはできるかと思いますが、それ以外の方法で制御したい。 【現在うまくいっていない方法の動作確認用のとりあえず作ったサンプルプログラム】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>フォーカス遷移抑止検証</title> <script type="text/javascript"> var iEventCount = 0; function onElemBlur() { if (++iEventCount > 10) return true;// 無限ループ抑止用 debug("blur : " + event.srcElement.value); event.srcElement.focus(); } function onElemFocus() { if (++iEventCount > 10) return true;// 無限ループ抑止用 debug("focus : " + event.srcElement.value); } function debug(msg) { var obElem = document.getElementById("debugmsg"); obElem.innerHTML += msg + "<br/>"; } </script> </head> <body> <input type="text" value="hoge1" onblur="onElemBlur()" onfocus="onElemFocus()" /> <br/> <input type="text" value="hoge2" onblur="onElemBlur()" onfocus="onElemFocus()" /> <br/> <br/> <br/> <span id="debugmsg" rows="10" cols="50" ></span> <br/> </body> </html> 長々と申し訳ありません。 よろしくお願いいたします。
- 締切済み
- JavaScript
- テキストボックスの背景色について
<html> <body> <form name="form1"> <input type="text" value="よろしく" name="text1"> <script language="javascript"> document.form1.text1.style.background-color = "green"; </script> </form> </body> </html> これはテキストボックスの背景色をグリーンにするプログラムなんですがうまくいきません。どこが間違っているのか指摘してください。
- ベストアンサー
- JavaScript
- インラインフレームで作ったテキストBOXのスクロールバーに色を付けるには
HPビルダーのインラインフレームで作ったスタイルシートのテキストボックスのスクロールバーに色を付けたいのです。 border-color : lime lime lime lime; border-style:dotted; background-color:#ffffcc; ここまでは表示されてますが、プレビューしてもスクロールバーに色が付きません、修正場所を教えてください。 『<IFRAME src="koushinrireki.html" scrolling="AUTO" width="565" height="190" frameborder="0" style="border-color : lime lime lime lime; border-style:dotted; background-color:#ffffcc; scrollbar-3dlight-color:#ffff00; scrollbar-arrow-color:#cc0066; scrollbar-base-color:white; scrollbar-darkshadow-color:#ffcccc; scrollbar-face-color:white; scrollbar-highlight-color:#ffcccc; scrollbar-shadow-color:#ffcccc;" </IFRAME></IFRAME>』
- ベストアンサー
- ホームページ作成ソフト
- イベント発生順序
いつもお世話になっています。 JavaScriptの発生順序を制御する方法はありますでしょうか？ 例えば、あるテキストボックスがあって、 Ａ１→Ｂ２とフォーカスが移るときのイベントですが、 Ｂ２.onFocus→Ａ２.onBlurの順番でイベントが発生していますが、これを Ａ２.onBlur→Ｂ２.onFocusとしたいです。 IE限定でいいので、よろしくお願いします。
- 締切済み
- JavaScript
- テキストボックスについて
１． テキストボックスの MultiLine プロパティを False に設定すると，そのプログラムの実行中に，テキストボックス内でリターンキーが押されると，エラー音が発生します。これを抑止したいのですが，どうすればよいのでしょうか？ なお，MultiLine プロパティを True にするとエラー音は発生しなくなりますが，そのかわりに改行が行われてしまいます。MultiLine プロパティを True にして改行を抑止する方法でも構いません。どうか教えていただきたく存じます。 ２． テキストボックス入力中にタブキーが押されたことを認識させたいのですが，KeyDown で認識させようとしてもうまくいきません。単にフォーカスが動いてしまうだけになってしまいます。フォーカスを移動させずに，タブキーが押されたことを認識させる方法を教えてください。 以上２点，どうかよろしくお願いいたします。
- ベストアンサー
- Visual Basic
- テキストボックスの背景の色について
CGIプログラミングをPerl言語で実装しています。入力画面のテキストボックスに関してはスタイルシートを使っていますが、同じブラウザ（IE）同じバージョン（6.0.28）でみていますが、テキストボックスの背景の色が異なるマシンがあります。何が原因でしょうか？
- 締切済み
- CGI
- html で文字の色が出てこない。
はじめてhtmlを勉強していて、わからないことがありました。 文字の色、背景色などを指定しているのですが、 実際にIEで見ても、色が出てきません。 下記が内容です。 どこが間違ってるのでしょうか？ --の所は、- -です。 タブは実際はコードにはあります。 <html> <head> <title>背景色とは</title> <style type="text/css"> <!-- body[color:blue; background-color:aqua; h1[color:green] p{background-color:white span[color:red] HR[background-color:red; height:20px] --> </style> </head> <body> <h1>ようこそ</H1> <hr> <p><span>私の</span>ホームページへ<br> このページでは<br> 私の好きな作家の作品について</br> 感想をつづっています。 </p> <a href="http://www.yahoo.co.jp">ヤフージャパン</a> </body> </html>
- ベストアンサー
- その他（ビジネス・キャリア）
お礼
いけました！ 有難う御座いました。 求めていたものと完璧にあっていました！ 有難う御座いました♪