JavaScriptで入力時にテキストボックスの色が変わるように設定する方法

JavaScript では、onfocus イベントを使用して、入力時にテキスト ボックスの色が変更されるように設定できます。onfocus イベントを要素にバインドし、「object.style.background="color」を使用するだけです。価値""。 onfocus イベントは、オブジェクトがフォーカスを取得したときに発生し、通常はフォームで使用されます。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

テキスト ボックスの色を動的に設定します:

主要是利用javascript中的触发事件onfocus
<script language="javascript" type="text/javascript">
      <!--
         function myFocus(obj,color){

             //判断文本框中的内容是否是默认内容


             if(obj.value=="请输入收件人地址"){
               obj.value="";
             }

             //设置文本框获取焦点时候背景颜色变换
             obj.style.backgroundColor=color;
         }


         function myblur(obj,color){

             //当鼠标离开时候改变文本框背景颜色
             obj.style.background=color;
         }

 

在input标签中

<input type="text" name="username" id="username" onfocus="myFocus(this,&#39;#f4eaf1&#39;)" onblur="myblur(this,&#39;white&#39;)" value="请输入收件人地址"/>

用上述简单方法可以做到文本框背景颜色的变换和提示信息的清除

オブジェクトがフォーカスを取得すると、onfocus イベントが発生します。 Onfocus は通常、、、および に使用されます。

ヒント: onfocus イベントの反対のイベントは、onblur イベントです。

拡張情報:

onblur イベントは、オブジェクトがフォーカスを失ったときに発生します。 Onblur は Javascript 検証コードによく使用され、通常はフォーム入力ボックスで使用されます。

文法

HTML:

<element onblur="SomeJavaScriptCode">

JavaScript:

object.onblur=function(){SomeJavaScriptCode};

[推奨学習: JavaScript上級チュートリアル]

以上がJavaScriptで入力時にテキストボックスの色が変わるように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：

js改变字体颜色

ソース：php.cn

前の記事：JavaScriptのイベントソースとは何ですか? 次の記事：JavaScriptでオブジェクトを作成する3つの方法は何ですか

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• VueUse の便利な 5 つの機能を共有して、一緒に使いましょう!
  2021-08-13 18:04:58
• CSSで指定したグリッドのサイズと位置を設定する方法
  2021-08-13 17:36:16
• CSSでグリッド線のサイズを定義する方法
  2021-08-13 16:16:35
• CSS背景画像のサイズを調整する裏ワザを教えます
  2021-08-13 15:33:28
• CSSを使って背景画像を繰り返すかどうかを設定する方法
  2021-08-13 14:30:39
• CSS 配置要素の背景画像を修正するための 1 つのトリック
  2021-08-13 11:57:56
• CSS相対原点位置の背景画像を修正するための1つのトリック
  2021-08-13 11:32:54
• css要素の背景画像を設定する方法
  2021-08-13 10:45:02
• MySQLで現在の時刻とタイムスタンプを取得する方法
  2021-08-24 10:52:19
• php7でcurlファイルのアップロードでエラーが発生した場合はどうすればよいですか?
  2023-02-18 07:56:01

最新の問題

CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...

から 2024-04-06 17:12:23

0

1

336

質問は同じですが、タイトルは次のように書き換えられています: Javascript のランダム関数が有効な応答を生成できません JSとHTMLを使用して簡単な乱数生成ゲームを作成しています。このゲームでは乱数の最小値と最大値を設定できます。しかし、変数を設定して結果を記録すると、ありえない数値が表示されます...

から 2024-04-03 22:03:14

0

1

275

Ag-Grid: 行のデータに基づいてではなく、タイマーに基づいて行のスタイルを設定することは可能ですか? しばらくしてから行の背景色を変更する必要があります。グリッドに秒単位の時間を示す列があり、その時間が 50% 経過した後に行の色を変更する必要があります。グリッド自体のデータは変更...

から 2024-04-03 20:14:05

0

1

360

日付の値に応じて色を変更する 日付の長さに基づいて行全体の色を変更したいと考えています。たとえば、日付の長さが 3 ～ 6 の場合、色はオレンジ色になり、6 を超える場合は赤色で表示されます。どうすればよいか教...

から 2024-04-03 13:11:25

0

1

371

ボタンをアクティブにするとホバー効果が誤動作する 私は Web 開発 (HTML、CSS、JS) の基礎を学ぼうとしているので、動作する Apple 電卓を作ろうとしています。小さなバグに気づくまではすべてが正常に動作していました...

から 2024-04-01 21:51:26

0

1

396

関連トピック

詳細>

• ISOファイルの作り方
• Apple 携帯電話のウイルス対策
• ウィンドウ切り替えのショートカットキー
• ネットワークに接続できない原因は何ですか?
• Matlab での fopen 関数の使用法
• 正規表現で数値を照合する方法
• Webページを開いたときに文字化けが発生する問題を解決する方法
• イーサリアムブラウザのブロックチェーンクエリ

人気のおすすめ

• jsはどういう意味ですか
• jsで文字列を配列に変換するにはどうすればよいですか?
• JavaScriptを使用してページを更新する方法
• js配列内の項目を削除する方法
• sqrt関数の使い方

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  Vue.js 開発の基本

  10067

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1416600 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2474360 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  503225 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215250 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  876537 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  6329 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  4951 回の学習
• 
  Go言語実践GraphQL

  4157 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  632 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  21181 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

私たちについて 免責事項 Sitemap

PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！