【高难？】keyCode的操作。

1.首先将焦点给Select
2.然后模拟按键Alt+↓。模拟按键是使用ActiveX控件来完成的。
代码如下：<Object type="application/x-oleobject" id=Shell
classid="clsid:F935DC22-1CF0-11D0-ADB9-00C04FD58A0B"></Object><SELECT id=cboSort >
<OPTION value=None selected>None</OPTION>
<OPTION value=1>1</OPTION>
<OPTION value=2>2</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=4>4</OPTION>
</SELECT>
<button onclick="demo();">展开</button>unction demo(){
cboSort.focus();
var WshShell = new ActiveXObject("Wscript.Shell");
try{
  WshShell.SendKeys("%{DOWN}");
}
catch(e){}
WshShell.Quit;
}</script>

昨晚俺和斑竹已经在另一贴中讨论过类似问题了！详见 JAVASCRIPT控制下拉列表的全部显示http://community.csdn.net/Expert/topic/5541/5541452.xml?temp=.4395716代码如下，L@_@K <body>
      <table border="1">
        <tr>
            <td valign="top">BigCity</td>
            <td>
                <select id="selBigCity" style="position: absolute; top: 19px;">
                    <option value=""></option>
                    <option value="1">BEIJING</option>
                    <option value="2">SHANGHAI</option>
                    <option value="3">CHONGQING</option>
                    <option value="4">TIANJIN</option>
                  </select>
            </td>
        </tr>
        <tr>
            <td>实现</td>
            <td>按 Tab 键焦点移动至 Select 时，选项自动展开，按首字母可实现选择同时确认，上下方向键移动，空格或回车键确认！</td>
        </tr>
        <tr>
            <td>问题</td>
            <td>style="position: absolute; top: 18px;" 还是不爽，因为俺不喜欢 absolute。</td>
        </tr>
    </table>
<script type="text/javascript">

</script>
</body>

这个效果原来俺也觉得做不到，但昨晚俺确实用 JS 实现了，JS 太好玩了，哈

感觉select是html的败笔。
不论是css还是事件都相当的不完美！

http://www.zhb.org.cn/wc/select/select.htm
^o^

<body>
<table border="1">
<tr>
<td valign="top">BigCity</td>
<td>
<select id="selBigCity">
<option value=""></option>
<option value="1">BEIJING</option>
<option value="2">SHANGHAI</option>
<option value="3">CHONGQING</option>
<option value="4">TIANJIN</option>
</select>
</td>
</tr>
<tr>
<td>实现</td>
<td>按 Enter键，选项自动展开，按上下方向键移动，空格或回车键确认！</td>
</tr>
<tr>
<td>问题</td>
<td>暂未发现问题</td>
</tr>
</table>
</body>
<script type="text/javascript">
<!--
/**
Author:chouchy(城市刀客)
Data:2007-5-18
*/
var oTemp=null;
var flag=false;
document.body.onkeypress=function()
{
var oBigCity = document.getElementById("selBigCity");
var oHeight =oBigCity.offsetHeight;
var oWidth = oBigCity.offsetWidth;
if(event.keyCode==13 && !flag)
{
if(oTemp==null)
{
oTemp=oBigCity.cloneNode(1);
oTemp.setAttribute("id","tempSelect");
oTemp.setAttribute("size",oBigCity.options.length);
oTemp.attachEvent("onclick",selectOptClick);
oTemp.attachEvent("onkeypress",selectOptChange);
oTemp.style.display="none";
document.body.appendChild(oTemp);
}
var top,left;
top=oBigCity.offsetTop;
left=oBigCity.offsetLeft;
while (oBigCity = oBigCity.offsetParent)
{
top+=oBigCity.offsetTop;
left+=oBigCity.offsetLeft;
}
top+=oHeight;
oTemp.style.cssText="display:block;z-index:-1;position:absolute;left:"+(left-1)+";top:"+top+";width:"+(oWidth+2);
flag=true;
oTemp.focus();
}
}
function selectOptClick()
{
document.getElementById("selBigCity").options.selectedIndex=oTemp.options.selectedIndex; document.body.removeChild(oTemp);
oTemp=null;
flag=false;
}
function selectOptChange()
{
if(flag)
{
if(event.keyCode==13 && flag || event.keyCode==32)
{
document.getElementById("selBigCity").options.selectedIndex=oTemp.options.selectedIndex;
document.body.removeChild(oTemp);
oTemp=null;
flag=false;
}
}
}
</script>

To chouchy(城市刀客) 多谢兄弟的改造，俺修正了一下位置，不过现在还是有点儿！详见代码，L@_@K<body>
<table border="1" style="background-color: #ffff00;">
<tr>
<td valign="top">BigCity</td>
<td id="tdSel">
<select id="selBigCity" style="background-color: #ffffff;">
<option value=""></option>
<option value="1">BEIJING</option>
<option value="2">SHANGHAI</option>
<option value="3">CHONGQING</option>
<option value="4">TIANJIN</option>
</select><br />
</td>
</tr>
<tr>
<td>实现</td>
<td>按 Enter键，选项自动展开，按上下方向键移动，空格或回车键确认！</td>
</tr>
<tr>
<td>问题</td>
<td>被 Table 挡住了，咋整？！</td>
</tr>
</table>
</body>
<script type="text/javascript">
<!--
/**
Author:chouchy(城市刀客)
Data:2007-5-18    Modifier: yixianggao
    Date: 2007-5-18
*/
var oTemp=null;
var flag=false;
var oContainer = document.getElementById("tdSel");document.body.onkeypress=function()
{
var oBigCity = document.getElementById("selBigCity");
var oHeight =oBigCity.offsetHeight;
var oWidth = oBigCity.offsetWidth;
if(event.keyCode==13 && !flag)
{
if(oTemp==null)
{
oTemp=oBigCity.cloneNode(1);
oTemp.setAttribute("id","tempSelect");
oTemp.setAttribute("size",oBigCity.options.length);
oTemp.attachEvent("onclick",selectOptClick);
oTemp.attachEvent("onkeypress",selectOptChange);
oTemp.style.display="none";
var oS2 = oContainer.appendChild(oTemp);
            oS2.style.backgroundColor = "green";
}
var top,left;
top=oBigCity.offsetTop;
left=oBigCity.offsetLeft;
while (oBigCity = oBigCity.offsetParent)
{
top+=oBigCity.offsetTop;
left+=oBigCity.offsetLeft;
}
top+=oHeight;
oTemp.style.cssText="display:block;z-index:-1;position:absolute;left:"+(left-1)+";top:"+top+";width:"+(oWidth+2);
flag=true;
oTemp.focus();
}
}
function selectOptClick()
{
document.getElementById("selBigCity").options.selectedIndex=oTemp.options.selectedIndex; oContainer.removeChild(oTemp);
oTemp=null;
flag=false;
}
function selectOptChange()
{
if(flag)
{
if(event.keyCode==13 && flag || event.keyCode==32)
{
document.getElementById("selBigCity").options.selectedIndex=oTemp.options.selectedIndex;
oContainer.removeChild(oTemp);
oTemp=null;
flag=false;
}
}
}
</script>

啊哈哈，终于实现了，多谢 chouchy(城市刀客) 的代码启发！俺去整理一下，稍后贴出来，哈

谢谢各位的热心关注。
可是问题实在太多了。<select id="selBigCity">
<option value=""></option>
<option value="1">BEIJING</option>
<option value="2">SHANGHAI</option>
<option value="3">CHONGQING</option>
<option value="4">TIANJIN</option>
</select>
<br>
<select id="sa">
<option value=""></option>
<option value="1">BEIJING</option>
<option value="2">SHANGHAI</option>
<option value="3">CHONGQING</option>
<option value="4">TIANJIN</option>
</select><script type="text/javascript">
<!--
/**
Author:chouchy(城市刀客)
Data:2007-5-18
*/
var oTemp=null;
var flag=false;
document.body.onkeypress=function()
{
var oBigCity = document.getElementById("selBigCity");
var oHeight =oBigCity.offsetHeight;
var oWidth = oBigCity.offsetWidth;
if(event.keyCode==13 && !flag)
{
if(oTemp==null)
{
oTemp=oBigCity.cloneNode(1);
oTemp.setAttribute("id","tempSelect");
oTemp.setAttribute("size",oBigCity.options.length);
oTemp.attachEvent("onclick",selectOptClick);
oTemp.attachEvent("onkeypress",selectOptChange);
oTemp.style.display="none";
document.body.appendChild(oTemp);
}
var top,left;
top=oBigCity.offsetTop;
left=oBigCity.offsetLeft;
while (oBigCity = oBigCity.offsetParent)
{
top+=oBigCity.offsetTop;
left+=oBigCity.offsetLeft;
}
top+=oHeight;
oTemp.style.cssText="display:block;z-index:-1;position:absolute;left:"+(left-1)+";top:"+top+";width:"+(oWidth+2);
flag=true;
oTemp.focus();
}
}
function selectOptClick()
{
document.getElementById("selBigCity").options.selectedIndex=oTemp.options.selectedIndex; document.body.removeChild(oTemp);
oTemp=null;
flag=false;
}
function selectOptChange()
{
if(flag)
{
if(event.keyCode==13 && flag || event.keyCode==32)
{
document.getElementById("selBigCity").options.selectedIndex=oTemp.options.selectedIndex;
document.body.removeChild(oTemp);
oTemp=null;
flag=false;
}
}
}
</script>

几乎接近完美，唯一的缺陷就是边框线条样式不一致！——高手帮帮忙！LZ 对俺的第三版满意不？L@_@K<body>
<table border="1">
    <tr>
        <td valign="top">BigCity</td>
        <td id="tdContainer">
            <select id="selBigCity">
                <option value="">--Please Select--</option>
                <option value="1">BEIJING</option>
                <option value="2">SHANGHAI</option>
                <option value="3">CHONGQING</option>
                <option value="4">TIANJIN</option>
            </select><br />
        </td>
    </tr>
    <tr>
    <td>实现</td>
    <td>按 Tab 键焦点移动至 Select 时，选项自动展开；<br />
        上下方向键移动，空格或回车键确认；<br />
        可鼠标点选；<br />
        按 Ctrl键隐藏（左右皆可）！</td>
    </tr>
    <tr>
    <td>问题</td>
    <td>JS 为什么这么好玩？！哈哈</td>
    </tr>
</table><script type="text/javascript">

</script>
</body>

在我原来的代码基础上修改，修正多个下面有select时被覆盖的问题<select id="selBigCity">
<option value=""></option>
<option value="1">BEIJING</option>
<option value="2">SHANGHAI</option>
<option value="3">CHONGQING</option>
<option value="4">TIANJIN</option>
</select>
<br>
<select id="sa">
<option value=""></option>
<option value="1">BEIJING</option>
<option value="2">SHANGHAI</option>
<option value="3">CHONGQING</option>
<option value="4">TIANJIN</option>
</select><script type="text/javascript">
<!--
/**
Author:chouchy(城市刀客)
Data:2007-5-18
Problem:选择之后两个select之间的距离发生变化，如果是放在每个select放在一个单独的td里就没有问题
*/
var oTemp=null;
var flag=false;
var objId="";
document.body.onkeypress=function()
{
var id=(objId==""?"selBigCity":objId);
var oBigCity=document.getElementById(id);
var oHeight =oBigCity.offsetHeight;
var oWidth = oBigCity.offsetWidth;
if(event.keyCode==13 && !flag)
{
if(oTemp==null)
{
oTemp=oBigCity.cloneNode(1);
oTemp.setAttribute("id","tempSelect");
oTemp.setAttribute("targetId",id);
oTemp.setAttribute("size",oBigCity.options.length);
oTemp.attachEvent("onclick",selectOptClick);
oTemp.attachEvent("onkeypress",selectOptChange);
oTemp.style.display="none";
document.body.appendChild(oTemp);
} hideObj(id); var top,left;
top=oBigCity.offsetTop;
left=oBigCity.offsetLeft;
while (oBigCity = oBigCity.offsetParent)
{
top+=oBigCity.offsetTop;
left+=oBigCity.offsetLeft;
}
top+=oHeight;
oTemp.style.cssText="display:block;z-index:-1;position:absolute;left:"+(left-1)+";top:"+top+";width:"+(oWidth+2);
flag=true;
oTemp.focus();
}
}
function selectOptClick()
{
document.getElementById(oTemp.targetId).options.selectedIndex=oTemp.options.selectedIndex;
document.body.removeChild(oTemp);
oTemp=null;
flag=false;
showObj();
}function selectOptChange()
{
if(flag)
{
if(event.keyCode==13 && flag || event.keyCode==32)
{
document.getElementById(oTemp.targetId).options.selectedIndex=oTemp.options.selectedIndex;
document.body.removeChild(oTemp);
oTemp=null;
flag=false;
showObj();
}
}
}//获取获得焦点的对象
function getObj()
{
if(event.srcElement!=oTemp)
objId=event.srcElement.id;
//alert(obj.id);
}window.onload=function()
{
var objs=document.getElementsByTagName("SELECT");
for(i=0;i<objs.length;i++)
{
objs[i].attachEvent("onfocus",getObj);
}
}function hideObj(id)
{
var obj=document.getElementById(id);
var p1=getPosition(obj);
var objs=document.getElementsByTagName("SELECT");
for(i=0;i<objs.length;i++)
{
if(getPosition(objs[i])["top"]>getPosition(obj)["top"]) //隐藏下面的select
{
objs[i].style.display="none";
}
}
}
function showObj()
{
var objs=document.getElementsByTagName("SELECT");
for(i=0;i<objs.length;i++)
{
objs[i].style.display="block";
}
}function getPosition(obj)
{
var top,left;
top=obj.offsetTop;
left=obj.offsetLeft;
while (obj = obj.offsetParent)
{
top+=obj.offsetTop;
left+=obj.offsetLeft;
}
return {"top":top,"left":left};
}
</script>

To chouchy(城市刀客) 兄弟的思路是算位置，俺不喜欢这种解法！不过还是要感谢兄弟给俺的启发！

回复人：wxylvmnn(城隍庙三当家的) ( 五级(中级)) 信誉：99 2007-5-18 15:31:36 得分:0
? 谢谢各位的热心关注。
可是问题实在太多了。。-----------------------------
to ：yixianggao(你我他，三人行必有我师焉！)
可能你没有明白lz的意思你的还是存在很多问题，如果你在你的代码的后面再加个<select>看看？我的代码实现了多个select的功能。
如果把<select>放到不同的<td>里，效果我觉得还不错，如果不满意隐藏下面的<select>，有很多方法解决，可以用div,可以用popup窗口等。

To chouchy(城市刀客)你的还是存在很多问题，如果你在你的代码的后面再加个<select>看看？——俺的代码是以 td 为容器的，一个 td 仅容纳一个 select，不能放多个！因为俺不喜欢计算位置的解法！对于多个 select 的情况，俺的代码确实还需要完善！

待俺回家整理后，贴出多个 Select 的代码！Go home！

终于整理好了，俺觉得第四版还是禁得住考验地，大家来评评！废话少说，代码如下：L-_-K 困了，睡觉去了 Zzz
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Select Focus</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
</head><body>
<h3>Tab 定焦后可自动展开的 Select！</h3>
<table border="1">
    <tr>
        <td valign="top">BigCity</td>
        <td>
            <select id="selBigCity">
                <option value="">--Please Select--</option>
                <option value="1">BEIJING</option>
                <option value="2">SHANGHAI</option>
                <option value="3">CHONGQING</option>
                <option value="4">TIANJIN</option>
            </select>
        </td>
        <td>
            <select id="selCSNDBrother">
                <option value="">--CSDN Brother--</option>
                <option value="1">chouchy(城市刀客)</option>
                <option value="2">hbhbhbhbhb1021(天外水火(我要多努力))</option>
                <option value="3">wxylvmnn (城隍庙三当家的)</option>
                <option value="4">yixianggao(就是俺)</option>
            </select>
        </td>
    </tr>
    <tr>
    <td>实现</td>
    <td colspan="2">按 Tab 键切换焦点至 Select 时，选项自动展开；<br />
        上下方向键移动选项的同时选择，并支持英文首字母定位及选择，再次按下 Tab 键离开；<br />
        仍可使用鼠标点选！</td>
    </tr>
    <tr>
    <td>问题</td>
    <td colspan="2">JS 为什么这么好玩？！哈哈</td>
    </tr>
</table>
<table>
    <tr>
        <td>Cats</td>
        <td>
            <SELECT id="selCats">
                <OPTION VALUE="1">Calico
                <OPTION VALUE="2">Tortie
                <OPTION VALUE="3">Siamese
            </SELECT>
        </td>
        <td>Cars</td>
        <td>
        <SELECT id="selCars">
            <OPTION VALUE="1">宝马
            <OPTION VALUE="2">保时捷
            <OPTION VALUE="3">奔驰
            <OPTION VALUE="4">法拉利
        </SELECT>        </td>
    </tr>
</table><script type="text/javascript">

</script>
</body></html>

强！感谢yixianggao(你我他，三人行必有我师焉！)和chouchy(城市刀客) 的代码支持！问题解决了，遗憾的是客户出乎意料的选择了使用ActiveX。我研究研究代码。

这篇文章写得比较好,在思路上有一定的启发和引导,我强烈的顶顶顶顶顶顶!!.
如果用activex,在下拉框中能够实现数据多的情况下右边出现下拉条吗??如果我有120个选项,那全部显示出来就成问题了,我要让他一获得焦点的时候就出现20个选项,其余用滚动下拉条来进行选择,如何实现呢??如果用javascript来实现,那又怎么办呢?? 我先谢谢了.

调试易

【高难？】keyCode的操作。

解决方案 »