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 を変更できます。

ドロップダウン コードを削除し、読みやすくするためにコンテナーを追加しました。必要なのは、要素とイベント リスナーの両方を含む formcontainer だけです。

<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 に答える