searchbar style property issue in JavaScript

Question

I have made a simple searchbar with default background color of dark. On focus it will be white. After I click the box, the color changes, but when I click outside of the box the color is still white. When I click outside of the box, the color should be dark again.

jsFiddle link

Javascript

function searchbar()
{
searchbar=document.getElementById("searchbar");
searchbar.style.background="#fff";
}

CSS

#searchbar{
background: #666;
height: 25px;
width: 345px;
}
#search{
width: 300px; 
height: 25px;
float: left;
border: 0;
}
#searchicon{
width: 10px;
padding: 2px;
margin: 2px;
float: left;
cursor: pointer;
}
#searchadv{
color: #000;
width: 10px;
padding: 2px;
margin: 2px;
float: left;
cursor: pointer;
}
#search input[type="text"] {
background: #666;
height: 23px;
width: 295px;
border: 0;
}
#search input[type="text"]:focus {
background: #fff;
}

HTML

<div id="searchbar" onclick="searchbar()">
            <div id="search">
            <input type="text" placeholder="Search" />
            </div>
            <div id="searchicon">
                <img src="img/search.png" />
            </div>
            <div id="searchadv">
                <img src="img/down-arrow.png" />
            </div>   
        </div>

Yes, because your code includes exactly one click handler which sets the colour permanently to white, you don't have another handler to set it back. However, [your CSS alone is enough to do this](http://jsfiddle.net/5Xbx8/) (at least in modern browsers). — nnnnnn, Jun 08 '13 at 11:43

score 1 · Accepted Answer · answered Jun 15 '13 at 16:32

1

I have find out the problem is variable and function will not be same. When I have the change the the function name it work fine. Again thank guys for responded to my question.

answered Jun 15 '13 at 16:32

Krishna Torque

397
4
15

Winston · Answer 2 · 2013-06-08T11:54:50.353

0

Do like this

HTML

<input type="text" placeholder="Search" onblur="searchbaroff(this)" />

JS

function searchbaroff(obj)
{
    obj.style.background="#666";
}

Also You can do like this

<input type="text" placeholder="Search" onfocus="this.style.background='#fff'" onblur="this.style.background='#fff'" />

For input fields better use onfocus instead of onclick besause if you set focus in field using Tab key, onclick does not work, and onfocus work, besides work in both cases with click and set focus with Tab key

edited Jun 08 '13 at 11:54

answered Jun 08 '13 at 11:46

Winston

1,670
2
17
28

@krishnaTORQUE Hmm .. chances are you're doing something wrong. You have added my function in JS code? You made a field input as I wrote? – Winston Jun 08 '13 at 12:01
actually its working in text area only not in entire searchbar area. – Krishna Torque Jun 08 '13 at 12:15
Try use recommendation from [this post](http://stackoverflow.com/a/1259769/813069) – Winston Jun 08 '13 at 12:23

score 0 · Answer 3 · answered Jun 08 '13 at 12:45

0

Try this

document.getElementById(id).addEventListener("blur", function() {
       alert("use here background="#666";");
 }, false);

answered Jun 08 '13 at 12:45

Amol

1,398
1
16
31

Khanh TO · Answer 4 · 2013-06-08T13:06:39.347

HTML:

 <div id="searchbar">
        <div id="search">
        <input type="text" placeholder="Search" />
        </div>
        <div id="searchicon">
            <img src="img/search.png" />
        </div>
        <div id="searchadv">
            <img src="img/down-arrow.png" />
        </div>   
    </div>`

JS:

$(document).ready(function(){
    $("#search input").click(function(){
        $("#searchbar").addClass("focus");
    });

    $("body").click(function(event){
        if (event.target !==  $("#search input")[0]){
            $("#searchbar").removeClass("focus");
        }
    });
});

CSS:

#searchbar{
height: 25px;
width: 345px;
}

#searchbar *{
background: #666;
}

#searchbar.focus *{
background: #fff;
}

#search{
width: 300px; 
height: 25px;
float: left;
border: 0;
}
#searchicon{
width: 10px;
padding: 2px;
margin: 2px;
float: left;
cursor: pointer;
}

#searchadv{
width: 10px;
padding: 2px;
margin: 2px;
float: left;
cursor: pointer;
}

#search input[type="text"] {
height: 23px;
width: 295px;
border: 0;
}

Check the fiddle. The idea is to add and remove a class (in this case is focus) and style on it. This would create a more maintainable code as separate styling from logic. Here is the sample styling:

#searchbar *{
background: #666;
}

#searchbar.focus *{
background: #fff;
}

searchbar style property issue in JavaScript

4 Answers4