入力中のテキストボックスの背景色を変える

HTMLで入力中の背景色を変える

よくあるパターンで入力中のエリアをわかりやすく
するためにフォーカスのあるテキストボックスの
背景色を変えてみます。

背景色を変えるには「style」の「backgroundColor」を操作する

背景色を変えるにはその部品の「style」にある
「backgroundColor」をJavascriptで書き変えます。

実際に変更する際の処理は

のように「backgroundColor」に変更したい色を
設定します。

色を元に戻すためにもう一つ関数を用意します。

入力テキストボックスでフォーカスの有無を取得

入力テキストボックス側では「onFocusイベント」と
「onBlurイベント」を使って背景色を操作します。

実際にHTMLを作成して実行

実際にHTMLを作成して入力中のテキストボックスの
背景色を変更します。

もっとシンプルにすると

editColor()関数とdefaultColor()にして

にして呼び出す側で

とするのも良いでしょう。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • 14 follow us in feedly

関連記事

SQLServer

disabledになっている値をサーバにPOSTする

disabledの値をサーバーにPOSTする HTMLでFORMに貼りつけた値をサーバのCGI

記事を読む

keybord_black

はみ出した文字を表示しない方法

IEでもChromeでもTDからはみ出した文字を消す IEでもChromeでもHTMLでTABLE

記事を読む

no-img

htmlでホームページに楽譜を表示するためのJavascript abcjs

htmlでホームページに楽譜を表示するためのJavascript 「abcjs」というのが

記事を読む

no-img

HTMLでツールチップ (Tooltip) を表示する方法(title属性)

HTMLで表を作成しそのセルにマウスを合わせると ツールチップ (Tooltip)を表示する方法で

記事を読む

no-img

HTMLサンプル

h2 h1 h2 h3 h4 h5 head1head2

記事を読む

no-img

ブラウザーのキャッシュを無効にする

ブラウザーのキャッシュを無効に 表示速度の改善などに役立つブラウザーのキャッシュですが、 処理に

記事を読む

no-img

番号付きリスト(Ordered List)<ol>タグをネストして表示する

番号付きリスト(Ordered List)<ol>タグをネストして表示してみます。

記事を読む

no-img

TABLEタグでセルサイズを同じにする

TABLEタグでセルサイズを同じに TABLEタグのセルのサイズをどのセルも同じ幅に したい場合

記事を読む

no-img

HTMLでブラウザ画面に印刷ボタン作成

Hブラウザー上に印刷ボタンを配置する HTMLで作成した画面をブラウザー表示し、 その画面に

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

no-img
番号付きリスト(Ordered List)<ol>タグをネストして表示する

番号付きリスト(Ordered List)<ol>タグをネ

no-img
htmlでホームページに楽譜を表示するためのJavascript abcjs

htmlでホームページに楽譜を表示するためのJavascrip

no-img
HTMLでツールチップ (Tooltip) を表示する方法(title属性)

HTMLで表を作成しそのセルにマウスを合わせると ツールチップ (T

keybord_black
はみ出した文字を表示しない方法

IEでもChromeでもTDからはみ出した文字を消す IEでもChr

no-img
HTMLサンプル

h2 h1 h2 h3 h4 h5 h

→もっと見る



PAGE TOP ↑