HTML

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

投稿日:2013/12/13 更新日:

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

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

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

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

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

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

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

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

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

実際にHTMLを作成して実行

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

もっとシンプルにすると

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

にして呼び出す側で

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

当サイトのおすすめ記事

パソコン 1

初心者でも失敗しないレンタルサーバーの選び方ですが、最近ではブログを立ち上げて、そこから広告収入を得る「アフィリエイト」が随分一般的になりました。 私の周りでも実際にやっている人が多くいます。 アフィ ...

プログラミング 2

SQLでIFを書けばWHERE句の内容を変えて検索できますが、条件ごとに同じようなSQLを 複数回書くのは面倒なので、1行で分岐できないかと言う事でSQLを作って見ました。 SQLでIFを使わずに条件 ...

SQLServer 3

SQLServerで発生するエラーコードをSQLで取得する SQLServerで発生したエラーコードの内容を メッセージが定義されているテーブルから取得します。 エラーコードを取得するSQL SQLs ...

4

SQLServerでは「ユーザー定義型」と呼ばれる独自のテーブル型をした戻り値を返す関数を作成することができます。 その作り方と使い方を解説します。 SQLServerでテーブル型を戻り値とする関数を ...

5

アフィリエイトでいきなり成果を出すのは難しいです。 でも、成果がないとレンタルサーバー代やドメイン代がペイできません。 しかも長い間、結果がでないとやる気もなくなってしまいます。 そういったことを防ぐ ...

-HTML
-, ,

Copyright© ソフトウェア開発日記 , 2018 All Rights Reserved.