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 サイトの他の関連記事を参照してください。