Question

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

的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密钥在字段中设置焦点，onclick不起作用，并Tab，请更好地使用onclick代替onfocus工作，除了使用Tab键

点击和设置焦点两种情况下的工作

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

检查fiddle。我们的想法是在其上添加和删除一个类（在本例中为focus）和样式。这将创建一个更易于维护的代码作为独立的逻辑样式。以下是样式样式：

#searchbar *{
background: #666;
}

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

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

4 个答案: