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

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

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

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

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

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

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

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

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

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

実際にHTMLを作成して実行

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

もっとシンプルにすると

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

にして呼び出す側で

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

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

関連記事

HTMLサンプル

h2 h1 h2 h3 h4 h5 head1head2

記事を読む

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

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

記事を読む

SQLServer

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

Message

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


*

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

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

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

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

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

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

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

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

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

TABLEタグでセルサイズを同じに TABLEタグのセルのサイズをど

→もっと見る



PAGE TOP ↑