CODEWITHSUNDEEP
javascripthtmlcss
Krishna Torque
Krishna Torque

Reputation: 645

searchbar style property issue in JavaScript

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>

Upvotes: 1

Views: 267

Answers (4)

Krishna Torque
Krishna Torque

Reputation: 645

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.

Upvotes: 1

Khanh TO
Khanh TO

Reputation: 48972

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;
}

Upvotes: 0

Amol
Amol

Reputation: 1461

Try this

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

Upvotes: 0

Winston
Winston

Reputation: 1805

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

Upvotes: 0

Related Questions