可选择也可填写的下拉框(用鼠标\键盘的上下键选择)

winson

winson

组别:管理员
性别:
积分:953
帖子:747

2008-01-23 17:41 | 只看楼主 树型| 收藏| 小中大 1^#

可选择也可填写的下拉框(用鼠标\键盘的上下键选择)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language='javascript'>
function getstring()
{
return "<input id=\"key\" type=text ondblclick=\"showMenu()\" onkeydown=\"selectElement()\" value=\"请用鼠标双击击这里\"/>";
}
function getKeyCode()
{
//alert(window.event.keyCode);
//alert(document.getElementById("key").value);
document.getElementById("key").value+=window.event.keyCode;
}
//==========================================================================================================
function mouseOver(e)
{
e.style.background="#0080ff";
}
function mouseOut(e)
{
e.style.background="#ff8000";
}
function mouseClick(e)
{
document.getElementById("key").value=e.innerText;
e.parentNode.style.display="none";
}
var num=0;
var divObj;
function showMenu()
{
var arr=getOjbPosition();
var left=arr[0];
var top=arr[1];
//alert(left+" : "+top);
var obj=document.getElementById("key");

var div=document.getElementById("Menu");
div.style.position="absolute";
div.style.background="#ff8000";
div.style.zIndex=2000;
div.style.left=left;
div.style.top=top;
div.style.width=obj.offsetWidth;
div.style.display="";
divObj=div;
num=div.childNodes.length;
}
function getDiv()
{
var div=document.getElementById("Menu");
var num=div.childNodes.length;
for(var i=0;i<num;i++)
{
alert(div.childNodes.outerHTML);
div.childNodes.style.background="#0080ff";
}

}
function getOjbPosition()
{
var arr=new Array();
var obj=document.getElementById("key");
var x=obj.offsetLeft;
var y=obj.offsetTop+obj.offsetHeight;
while(obj.offsetParent)
{
obj=obj.offsetParent;
x+=obj.offsetLeft;
y+=obj.offsetTop;
}
arr[0]=x;
arr[1]=y;
return arr;
}
var k=0;
var tag=0;
function selectElement()
{

var key=window.event.keyCode
if(divObj.style.display=="")
{
if(key==40)
{
//divObj.childNodes[k].style.background="#0080ff";
if(tag==0)
{}
else
{
k++;
if(k>=num)
{
k=0;
}
}
}
if(key==38)
{
//divObj.childNodes[k].style.background="#0080ff";
k--;
if(k<0)
{
k=num-1;
}
}
for(var i=0;i<num;i++)
{
if(i==k)
{
divObj.childNodes.style.background="#0080ff";
document.getElementById("key").value=divObj.childNodes.innerText;
}
else
{
divObj.childNodes.style.background="";
//document.getElementById("key").value=divObj.childNodes.innerText;
}
}
}
tag=1;
if(key==13)
{

if(divObj.style.display=="")
{
divObj.style.display="none";
}
else
{
divObj.style.display="";
}
}

}
//******************************************* 测试数组 ***********************************
var arr="A,B,C,D,E,F,H";
var t=0;
function getArray()
{

var str=document.getElementById("AVG").value;
var alist=arr.split(',');

for(var i=0;i<alist.length;i++)
{
if(alist==str)
{
t=1;
}
}

if(t==1)
{
arr="";
for(var i=0;i<alist.length;i++)
{
if(alist!=str)
{
arr+=alist+",";
}
}
arr=arr.substring(0,arr.length-1);
t=0;
}
else
{
arr=arr+","+str;
}
alert(arr);

}
</script>
</head>

<body>
当一个字符数组含有某一个元素时删除它，如果没有该元素，则增加到数组中去<br>
<input id="AVG" type=text value="输入字符" />
<input type=button onclick="getArray()" value="测试数组"/><p><p><p><p><p>
<script language='javascript'>document.write(getstring())</script>
双击显示下拉列表后可以用键盘的上下键选择,也可以用回车键显示下拉列表
<div id="Menu" style="background008080;display:none;cursorefault">
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span style="width:100%">AAA</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>bbb</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>ccc</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>ddd</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>eee</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>fff</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>AAA</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>bbb</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>ccc</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>ddd</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>eee</span></div>
</div>
</body>
</html>

随风飘飘天地任逍遥！
http://winson.szblogs.com
http://winsonet.cnblogs.com

TOP

yahoo888

组别:兴趣学员
性别:
积分:18
帖子:18

2008-07-30 18:00 树型| 收藏| 小中大 2^#

回复：可选择也可填写的下拉框(用鼠标\键盘的上下键选择)

呵呵,我也写了一个这样的东东,最近项目里需要的,不过实现方式不一样,

TOP

<<上一主题|下一主题>>

1/1页1 跳转到页