0

我很难做到这一点。似乎有很多奇怪的方法可以实现这一点，但我真的很想找到一种不那么黑客的方法。我在一个输入之后，它还包含一个左侧的分割部分，它有一个下拉列表。

这基本上就是我所追求的：http: //jsfiddle.net/spadez/7BgYU/

<form name="multisearch" action="http://www.wittysparks.com/searchvideos/?q=" id="multisearchForm" method="get">
<ul class="ws_drop_down">
    <li><a href="#" title="Global Search"><span id="selectedsearch">ViDEOs</span>
    <![if gt IE 6]>
    </a>
    <![endif]>
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class='ws_drop_downm'>
      <li><a href="javascript:void(0);" onclick="forWebSearch('http://www.wittysparks.com/news/search/?q=','NEWs');" title="Search NEWs">NEWs</a></li>
      <li><a href="javascript:void(0);" onclick="forWebSearch('http://www.wittysparks.com/searchvideos/?q=','ViDEOs');" title="Search ViDEOs">ViDEOs</a></li>
      <li><a href="javascript:void(0);" onclick="forWebSearch('http://www.wittysparks.com/searchvideos/?q=','TOPiCs');" title="Search TOPiCs">TOPiCs</a></li>
      <li><a href="javascript:void(0);" onclick="forWebSearch('http://www.wittysparks.com/searchvideos/?q=','QUOTEs');" title="Search QUOTEs">QUOTEs</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul><input class="multisearchInput" name="q" type="text" value="Type here & press enter" onFocus="this.value=''"/></form>

我真正追求的是一种将它放在输入框内的方法，而不是像目前在这个例子中所做的那样。我知道这是可能的，因为谷歌在这里用它的麦克风图标做到了：

https://www.google.com/search?q=test

我的问题是，实现这一目标的最佳方法是什么，理想情况下具有最多的兼容性和最少的代码和黑客攻击。

4

1 回答 1

3

回答问题以使其简单，以供将来参考。

您可以将下拉菜单包装在容器中，并在获得或移除焦点时更改其边框和其他 css。

删除了下拉代码并添加了容器以提高可读性。您所需要的只是包含元素和事件侦听器的表单容器。

<div id="formcontainer">
    <div id="dropdowncontainer">
        <!-- dropdown here-->
    </div>
    <div id="inputcontainer">
         <input class="multisearchInput" name="q" type="text" value="Type here & press enter" />
    </div>
</div>

并将其放入您的 javascript 代码中。

document.getElementById('multisearchInput').onfocus=function(){
    this.value='';
    document.getElementById('formcontainer').style['border'] ='1px solid red';
}

document.getElementById('multisearchInput').onblur=function(){
    document.getElementById('formcontainer').style['border'] ='none';
}

运行 jsfiddle：http: //jsfiddle.net/7BgYU/2/

于 2013-06-03T12:03:11.510 回答