How do i change Background color of textbox when onfocus?

i tried this code but its not working.. when i on-focus textbox it shows error

   function ChangeBgColor(obj, evt) 
    { 
            if(evt.type=="focus") 
                style.background ="lightgrey";
            else if(evt.type=="blur") 
            {
               style.background="white";
            }          
    }

Answers:

Answer

What is style? You have not defined it anywhere in your code above:

function ChangeBgColor(obj, evt) 
{ 
    if(evt.type=="focus") 
        style.background ="lightgrey";  //<--what is style?
    else if(evt.type=="blur") 
    {
        style.background="white";
    }          
}

I am guessing that you wanted something like

obj.style.background ="lightgrey";

And in the code above, simplified

function ChangeBgColor(obj, evt) 
{ 
    obj.style.background = (evt.type=="focus") ? "lightgrey" : "white";
}

The best answer is to use pure CSS.

Answer

JavaScript is not necessary for this task, just use css (:focus is supported since IE8)

https://developer.mozilla.org/en-US/docs/CSS/:focus

input { background: lightgray; }
input:focus { background: white; }

Only if this effect is absolutely needed also on < IE8 then JS (properly wrapped in a conditional comment) can be used, but even in this scenario it is recommended to keep off style from logic: e.g.

function ChangeBgColor(obj, evt) { 
    obj.className = (evt.type === "focus") ? "focus" : "";
}

and use this style

 input { background: lightgray; }

 input:focus, 
 input.focus { background: white; }
Answer

obj.style.background = "#C8C8C8";

Answer

Yep, you should try this javascript code to change the background color for this element:

  var obj = document.getElementById("yourId");
  obj.onfocus = function() {
    obj.style.backgroundColor = 'red';
  }

Now you can change whatever color you want

Answer

Try doing it with jQuery.

$('#div').on('focus', function() {
    $(this).css({background:'blue'});
});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.