javascript - JavaScript 中的搜索栏样式属性问题

Question

我制作了一个简单的搜索栏，默认背景颜色为深色。在焦点上它将是白色的。单击框后，颜色会发生变化，但是当我在框外单击时，颜色仍然是白色。当我在框外单击时，颜色应该再次变暗。

jsFiddle 链接

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>

Answer 1

我发现问题是可变的，功能也不一样。当我更改函数名称时，它工作正常。再次感谢大家回答我的问题。

Answer 2

这样做

HTML

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

JS

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

你也可以这样做

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

对于输入字段，如果您使用键在字段中设置焦点，则更好地使用onfocus而不是因为它不起作用，并且工作，除了在两种情况下都使用单击并使用键设置焦点onclickTabonclickonfocusTab

Answer 3

尝试这个

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

Answer 4

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

检查小提琴。这个想法是添加和删除一个类（在本例中是focus）和样式。这将创建一个更易于维护的代码，作为与逻辑分开的样式。这是示例样式：

#searchbar *{
background: #666;
}

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