الرئيسية > برمجة > تغيير لون خلفية الحقل الفعال

تغيير لون خلفية الحقل الفعال


السلام عليكم و رحمة الله و بركاته
أحيانا عندما يملئ المستخدم نموذج ثم يتوقف قليلا قد ينسى اين كان😀 أقصد هنا في أي حقل (input text)، هنا لنساعده قليلا نقوم بتغيير لون الخلفية للحقل الذي يكون فيه، حتى إذا نسى نفسه فإنه سيلاحظ اللون المتغير لذاك الحقل عن أخواته.
الدلة ActiveField تقوم أولا بالإحتفاظ باللون الحالي للخلفية بعدها تغير لون الخلفية أثناء الحدث onfocus، أما الدالة ResetColor فهي ترجع اللون الأصلي للحقل عند الحدث onblur، يعني هذا ليس بشيء كبير.

<html>
<head>

  <script type="text/javascript">

   var BGc;

   function ActiveField(field)
    {
         if(navigator.appName == "Microsoft Internet Explorer")
          BGc = x.currentStyle;
         else
         // Other surfer's, must be compatible, I tested only in FireFox 3.6
          BGc = window.getComputedStyle(field,null).getPropertyValue("backgroundcolor");
     field.style.background = '#228B22';
    }
   function ResetColor(field)
    {
         field.style.background = BGc;
        }
  </script>

  <style type="text/css">
   input.text
    {
     background-color: 000000;
     color:#FFFFFF;
    }
  </style>

</head>
<body>

<form method="post" name="form1" action="">
  <fieldset>
    <label>Password:</label>
    <input type="password" name="password" id="password" class="text" size="32" onfocus="ActiveField(password)" onblur="ResetColor(password)"/><br>
    <label>Re-Enter Password:</label>
    <input type="password" name="repassword" id="repassword" size="32" onfocus="ActiveField(repassword)" onblur="ResetColor(repassword)" /><br>
    <input type="submit" value="Submit" id="submit" >
  </fieldset>
</form>
</body>
</html>

التصنيفات :برمجة الوسوم:, , , ,
  1. 23 يناير 2011 الساعة 8:23 م

    الله يجزيك الخير على الشرح

  2. 23 يناير 2011 الساعة 8:51 م

    بارك الله فيك يا أخي.

  1. No trackbacks yet.

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: