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

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

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

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

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

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

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

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

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

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

実際にHTMLを作成して実行

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

もっとシンプルにすると

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

にして呼び出す側で

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

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

    SQLServer

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

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

    記事を読む

    HTMLサンプル

    h2 h1 h2 h3 h4 h5 head1head2

    記事を読む

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

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

    記事を読む

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

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

    記事を読む

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

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

    記事を読む

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

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

    記事を読む

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

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

    記事を読む

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

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

    記事を読む

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

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

    記事を読む

    Message

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


    *

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

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

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

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

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

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

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

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

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

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

    →もっと見る



    PAGE TOP ↑