求助:浏览器方式下,如何使下拉列表获得输入焦点,而不仅仅可以选择?

哈哈，刚好我也有这种需要，写了个东东，不然你看看先？
原来是在用户单击INPUT框后弹出一SELECT，然后点其它位置就消失。
后来用户说这种特殊的INPUT框与一般的区别不大，不好区分，于是就……，代码给你吧：<html>
<head>
<title>综合检索</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<link rel="stylesheet" href="ss.css">
<script>
function ClearAll()
{
  checkboxrq.checked=0;
  checkboxtt.checked=0;
  checkboxct.checked=0;  textbc.value="";
  textyt.value="";
  textbt.value="";
  textft.value="";
  textzz.value="";
  textzw.value="";
  textqh.value="";  input_bm.value="";
  input_ly.value="";
  input_lm.value="";
  input_zk.value="";
  input_wztz.value="";  y1.value="";
  m1.value="";
  d1.value="";
  y2.value="";
  m2.value="";
  d2.value="";
}var logic=" AND ";//逻辑操作符
function GetInfo()
{
  var s="";
  if( textbc.value!="" )
    s = s!=""?s + logic + "(版次=" + textbc.value + ")":"(版次=" + textbc.value + ")";
  if( textyt.value!="" )
    s = s!=""?s + logic + "(引题=%" + textyt.value + "%)":"(引题=%" + textyt.value + "%)";
  if( textbt.value!="" )
    s = s!=""?s + logic + "(标题=%" + textbt.value + "%)":"(标题=%" + textbt.value + "%)";
  if( textft.value!="" )
    s = s!=""?s + logic + "(副题=%" + textft.value + "%)":"(副题=%" + textft.value + "%)";
  if( textzz.value!="" )
    s = s!=""?s + logic + "(作者=%" + textzz.value + "%)":"(作者=%" + textzz.value + "%)";
  if( textzw.value!="" )
    s = s!=""?s + logic + "(正文=%" + textzw.value + "%)":"(正文=%" + textzw.value + "%)";
  if( textqh.value!="" )
  {
    if( isNaN( parseInt(textqh.value) ) || textqh.value.length>5 )
    {
      alert("期号必须是数字，且长度限制为5位.");
      return;
    }
    s = s!=""?s + logic + "(期号=" + textqh.value + ")":"(期号=" + textqh.value + ")";
  }  if( input_bm.value!="" )
    s = s!=""?s + logic + "(版名=%" + input_bm.value + "%)":"(版名=%" + input_bm.value + "%)";
  if( input_ly.value!="" )
    s = s!=""?s + logic + "(来源=%" + input_ly.value + "%)":"(来源=%" + input_ly.value + "%)";
  if( input_lm.value!="" )
    s = s!=""?s + logic + "(栏目=%" + input_lm.value + "%)":"(栏目=%" + input_lm.value + "%)";
  if( input_zk.value!="" )
    s = s!=""?s + logic + "(专刊=%" + input_zk.value + "%)":"(专刊=%" + input_zk.value + "%)";
  if( input_wztz.value!="" )
    s = s!=""?s + logic + "(文章特征=%" + input_wztz.value + "%)":"(文章特征=%" + input_wztz.value + "%)";  if( checkboxtt.checked==1 )
    s = s!=""?s + logic + "(头条=1)":"(头条=1)";
  if( checkboxct.checked==1 )
    s = s!=""?s + logic + "(插图=1)":"(插图=1)";  var sBeginDate="", sEndDate="", sDate="";
  if( checkboxrq.checked==1 )
  {
    if( y1.selectedIndex>=0 )
    {
      if( m1.selectedIndex>=0 )
      {
        if( d1.selectedIndex>=0 )
        {
          sBeginDate="" + y1.options[y1.selectedIndex].text + "." + m1.options[m1.selectedIndex].text + "." + d1.options[d1.selectedIndex].text + "";
        }
        else
          sBeginDate="" + y1.options[y1.selectedIndex].text + "." + m1.options[m1.selectedIndex].text + "";
      }
      else
        sBeginDate="" + y1.options[y1.selectedIndex].text + "";
    }
    if( y2.selectedIndex>=0 )
    {
      if( m2.selectedIndex>=0 )
      {
        if( d2.selectedIndex>=0 )
        {
          sEndDate="" + y2.options[y2.selectedIndex].text + "." + m2.options[m2.selectedIndex].text + "." + d2.options[d2.selectedIndex].text + "";
        }
        else
          sEndDate="" + y2.options[y2.selectedIndex].text + "." + m2.options[m1.selectedIndex].text + "";
      }
      else
        sEndDate="" + y2.options[y2.selectedIndex].text + "";
    }    if( sBeginDate!="" && sEndDate!="" )
    {
      sDate = "(日期>=" + sBeginDate + " AND 日期<=" + sEndDate + ")";
    }
    else if( sBeginDate!="" && sEndDate=="" )
    {
      sDate = "(日期=" + sBeginDate + ")";
    }
    else if( sBeginDate=="" && sEndDate!="" )
    {
      sDate = "(日期=" + sEndDate + ")";
    }
    s = s!=""?s + logic + sDate:sDate;
  }    if( textjsbds.value!="" )
    textjsbds.value=textjsbds.value+logic+"("+s+")";
  else
    textjsbds.value=s;
  return s;
}function Refer()
{
  if(GetInfo()=="")
    return false;
  ClearAll();
}function Search()
{
  if(textjsbds.value=="")
    return false;
  else
  {
    GetInfo();
    ClearAll();
    top.condition=textjsbds.value;
    top.startoneseek();
    SearchForm.SearchWord.value=top.condition;
    return true;
  }
}function Clear()
{
  ClearAll();
  top.condition="";
  textjsbds.value="";
  status="";
}var pops="";
function popList(a)
{
  var t=pops.split(",");
  var bFind=0;
  for(var n=0; n<t.length; n++)
  {
    if(t[n]==a.name)
    {
      bFind=1;
      break;
    }
  }
  if(bFind==0)
  {
    if(pops!="")
      pops+=","+a.name;
    else
      pops=a.name;
  }  if( a.style.visibility=="hidden" )
  {
    a.style.left=window.event.x;
    a.style.top =window.event.y;
    a.style.visibility="visible";    t=pops.split(",");
    for(n=0; n<t.length; n++)
      if(t[n]!=a.name)
        eval(t[n]).style.visibility="hidden";
  }
  else
    a.style.visibility="hidden";
}function setText(a, b)
{
  a.value=b.options[b.selectedIndex].text;
  b.style.visibility="hidden";
}
</script>
</head><body text="#FFFFFF" onLoad="ClearAll()">
<table width="100%" border="0" cellspacing="1" cellpadding="5" height="100%" align="center">
  <tr>
    <td colspan="2" height="15">       
      <input type="checkbox" name="checkboxrq" value="1">
      日期: 从
      <select name="y1" style="font-size:9pt">
        <option selected value></option>
        <option>1949</option>
        <option>1950</option>
        <option>1951</option>
        <option>1952</option>
        <option>1953</option>
        <option>1954</option>
        <option>1955</option>
        <option>1956</option>
        <option>1957</option>
        <option>1958</option>
        <option>1959</option>
        <option>1960</option>
        <option>1961</option>
        <option>1962</option>
        <option>1963</option>
        <option>1964</option>
        <option>1965</option>
        <option>1966</option>
        <option>1967</option>
        <option>1968</option>
        <option>1969</option>
        <option>1970</option>
        <option>1971</option>
        <option>1972</option>
        <option>1973</option>
        <option>1974</option>
        <option>1975</option>
        <option>1976</option>
        <option>1977</option>
        <option>1978</option>
        <option>1979</option>
        <option>1980</option>
        <option>1981</option>
        <option>1982</option>
        <option>1983</option>
        <option>1984</option>
        <option>1985</option>
        <option>1986</option>
        <option>1987</option>
        <option>1988</option>
        <option>1989</option>
        <option>1990</option>
        <option>1991</option>
        <option>1992</option>
        <option>1993</option>
        <option>1994</option>
        <option>1995</option>
        <option>1996</option>
        <option>1997</option>
        <option>1998</option>
        <option>1999</option>
      </select>
      年
      <select name="m1" style="font-size:9pt">
        <option selected value></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
      </select>
      月
      <select name="d1" style="font-size:9pt">
        <option selected value></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>
        <option>24</option>
        <option>25</option>
        <option>26</option>
        <option>27</option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>
      </select>
      日 -
      <select name="y2" style="font-size:9pt">
        <option selected value></option>
        <option>1949</option>
        <option>1950</option>
        <option>1951</option>
        <option>1952</option>
        <option>1953</option>
        <option>1954</option>
        <option>1955</option>
        <option>1956</option>
        <option>1957</option>
        <option>1958</option>
        <option>1959</option>
        <option>1960</option>
        <option>1961</option>
        <option>1962</option>
        <option>1963</option>
        <option>1964</option>
        <option>1965</option>
        <option>1966</option>
        <option>1967</option>
        <option>1968</option>
        <option>1969</option>
        <option>1970</option>
        <option>1971</option>
        <option>1972</option>
        <option>1973</option>
        <option>1974</option>
        <option>1975</option>
        <option>1976</option>
        <option>1977</option>
        <option>1978</option>
        <option>1979</option>
        <option>1980</option>
        <option>1981</option>
        <option>1982</option>
        <option>1983</option>
        <option>1984</option>
        <option>1985</option>
        <option>1986</option>
        <option>1987</option>
        <option>1988</option>
        <option>1989</option>
        <option>1990</option>
        <option>1991</option>
        <option>1992</option>
        <option>1993</option>
        <option>1994</option>
        <option>1995</option>
        <option>1996</option>
        <option>1997</option>
        <option>1998</option>
        <option>1999</option>
      </select>
      年
      <select name="m2" style="font-size:9pt">
        <option selected value></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
      </select>
      月
      <select name="d2" style="font-size:9pt">
        <option selected value></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>
        <option>24</option>
        <option>25</option>
        <option>26</option>
        <option>27</option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>
      </select>
      日 </td>
  </tr>
  <tr><td> </td></tr>
  <tr>
    <td width="56%" height="25">
      <div align="center">引题:
        <input type="text" name="textyt" style="font-size:9pt" size="25">
      </div>
    </td>
    <td width="44%" height="25">
      <div align="center">专刊:
        <a href="#" onClick="popList(pop_zk); return false;"><img src="img/click.gif" border="0" WIDTH="11" HEIGHT="11"></a>
        <input name="input_zk" type="text" style="font-size:9pt" size="22">
        <select name="pop_zk" size="4" style="position:absolute; left:-100px; top:-100px; visibility:hidden; font-size:9pt" onChange="setText(input_zk, pop_zk)">
<option>电脑世界</option>
<option>都市生活</option>
<option>副刊</option>
<option>江花周刊</option>
<option>扩大版</option>
<option>每周证券</option>
<option>农村版</option>
<option>人与社会周刊</option>
<option>少年文学周刊</option>
<option>市场周刊</option>
<option>文化报</option>
<option>五环广场</option>
<option>武汉晨报</option>        </select>
      </div>
    </td>
  </tr>
  <tr>
    <td width="56%" height="25">
      <div align="center">全文:
        <input type="text" name="textzw" style="font-size:9pt" size="25">
      </div>
    </td>
    <td width="56%" height="25">
      <div align="center">来源:
        <a href="#" onClick="popList(pop_ly); return false;"><img src="img/click.gif" border="0" WIDTH="11" HEIGHT="11"></a>
        <input name="input_ly" type="text" style="font-size:9pt" size="22">
        <select name="pop_ly" size="4" style="position:absolute; left:-100px; top:-100px; visibility:hidden; font-size:9pt" onChange="setText(input_ly, pop_ly)">
<option>自写稿</option>
<option>外电</option>
<option>外报</option>
<option>外刊</option>

        </select>
      </div>
    </td>
  </tr>
    <td width="56%" height="25">
      <div align="center">标题:
        <input type="text" name="textbt" style="font-size:9pt" size="25">
      </div>
    </td>
    <td width="44%" height="25">
      <div align="left"> 文章特征:
        <a href="#" onClick="popList(pop_wztz); return false;"><img src="img/click.gif" border="0" WIDTH="11" HEIGHT="11"></a>
        <input name="input_wztz" type="text" style="font-size:9pt" size="22">
        <select name="pop_wztz" size="4" style="position:absolute; left:-100px; top:-100px; visibility:hidden; font-size:9pt" onChange="setText(input_wztz, pop_wztz)">
<option>消息</option>
<option>散文</option>
<option>启示</option>
<option>通讯</option>
<option>小说</option>
<option>声明</option>
<option>言论</option>
<option>通知</option>
<option>书画</option>
<option>图片</option>
<option>通告</option>
<option>诗歌</option>
<option>广告</option>
<option>公告</option>
<option>小小说</option>        </select>
      </div>
    </td>
  </tr>
  <tr>
    <td width="56%" height="25">
      <div align="center">副题:
        <input type="text" name="textft" style="font-size:9pt" size="25">
      </div>
    </td>
    <td width="44%" height="25">
      <div align="center">期号:
        <input type="text" name="textqh" style="font-size:9pt" size="25">
      </div>
    </td>
  </tr>
  <tr>
    <td width="56%" height="25">
      <div align="center">作者:
        <input type="text" name="textzz" style="font-size:9pt" size="25">
      </div>
    </td>
    <td width="44%" height="25">
      <div align="center">
        <input type="checkbox" name="checkboxtt" value="1">
        头条
        <input type="checkbox" name="checkboxct" value="1">
        有插图的文章
      </div>
    </td>
  </tr>
  <tr>
    <td width="56%" height="25">
      <div align="center">版次:
        <input type="text" name="textbc" style="font-size:9pt" size="25">
      </div>
    </td>
    <td rowspan="3" height="100">
      <div align="center">
        <table border="1" cellspacing="2" cellpadding="5" align="center" width="92">
          <tr>
            <td height="81">
              <div align="center">逻辑运算选择<br>
                <input type="radio" name="radio1" checked onClick="logic=' AND '">
                逻辑与<br>
                <input type="radio" name="radio1" onClick="logic=' OR '">
                逻辑或</div>
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
  <tr>
    <td width="56%" height="2">
      <div align="center">版名:
        <input name="input_bm" type="text" style="font-size:9pt" size="25">
      </div>
    </td>
  </tr>
  <tr>
    <td width="44%" height="25">
      <div align="center">栏目:
        <input name="input_lm" type="text" style="font-size:9pt" size="25">
      </div>
    </td>
  </tr>
  <tr>
    <td width="56%" height="2">
    </td>
  </tr>
  <tr>
    <td colspan="2" height="115">
      <div align="center">
        <hr noshade width="100%">
        检索表达式:
        <input type="text" name="textjsbds" size="80" style="font-size:9pt">
         <form method="post" action="Search.wct?ChannelID=4255" name="SearchForm" target="frame2">
          <input type="hidden" name="SearchWord">
          <input type="submit" name="Button1" value=" 开始检索 " style="font-size:9pt" onClick="Search()">
            
          <input type="button" name="Button2" value="提交检索表达式" style="font-size:9pt" onClick="Refer()">
            
          <input type="button" name="Button3" value=" 全部清空 " style="font-size:9pt" onClick="Clear()">
         </form>
      </div>
    </td>
  </tr>
</table>
</body></html>

调试易

求助:浏览器方式下,如何使下拉列表获得输入焦点,而不仅仅可以选择?

解决方案 »