Textbox color change(In case of validation error, mouse hover)

Sometimes we want the TextBox color to be changed on mouse hover or for showing validation errors. We can achieve this functionality by using following code.

Background Color Change on Mouse Hover In Textbox or Dropdown

·       Through javascript

In .aspx

<script type="text/javascript">

   

        function ChangeBackground() {

         window.event.srcElement.style.background = "yellow";

       }

       function RestoreBackground() {

   window.event.srcElement.style.background = "#FFFFFF";       }

  

       function CheckKey() {

         alert("The key code is" + window.event.keyCode);

         }

       

     </script>

In textbox properties(Add these) 

onmouseover="ChangeBackground();" 

onmouseout="RestoreBackground();"

In .cs page (on Pageload)

TextBox1.Attributes.Add("onmouseover","ChangeBackground();");

TextBox1.Attributes.Add("onmouseout","RestoreBackground();");

Border Color Change on Button click In Textbox

·       Through javascript

In .aspx

<script type="text/javascript">

        function DoClick(txtId) {

            var textbox = document.getElementById(txtId);

            if (textbox.value == "") {

                textbox.style.borderColor = '#ff0000';

            } 

              else {

                     textbox.style.borderColor = '#ffffff';

                   }

            }

 </script>

In .cs page (on Pageload)

Button1.OnClientClick = "DoClick('" + TextBox1.ClientID + "')";

Border Color Change when you keyup (textbox blank) In Textbox

Add this textbox

<asp:TextBox runat="server" style="border: 1px solid #7F9DB9" onkeyup="if(this.value=='')this.style.borderColor='#ff0000';

else this.style.borderColor='#ffffff';" Text="Type" />

Background Color Change when you focus on textbox

Add this into textbox property

onfocus = "this.style.background = '#99FF99'" // greencolor

Summary

In this article I try to expose the TextBox color change property. I hope after reading this article you will be able to use this trick in your code. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article.