<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
![](/Images/OutliningIndicators/None.gif)
<
html
>
<
head
>
<
title
>
Untitled
</
title
>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
language
='javascript'
>
function getstring()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return "<input id=\"key\" type=text οndblclick=\"showMenu()\" οnkeydοwn=\"selectElement()\" value=\"请用鼠标双击击这里\"/>";
}
function getKeyCode()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
//alert(window.event.keyCode);
//alert(document.getElementById("key").value);
document.getElementById("key").value+=window.event.keyCode;
}
//==========================================================================================================
function mouseOver(e)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
e.style.background="#0080ff";
}
function mouseOut(e)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
e.style.background="#ff8000";
}
function mouseClick(e)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
document.getElementById("key").value=e.innerText;
e.parentNode.style.display="none";
}
var num=0;
var divObj;
function showMenu()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var div=document.getElementById("Menu");
var num=div.childNodes.length;
for(var i=0;i<num;i++)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
alert(div.childNodes[i].outerHTML);
div.childNodes[i].style.background="#0080ff";
}
}
function getOjbPosition()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var arr=new Array();
var obj=document.getElementById("key");
var x=obj.offsetLeft;
var y=obj.offsetTop+obj.offsetHeight;
while(obj.offsetParent)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var key=window.event.keyCode
if(divObj.style.display=="")
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(key==40)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
//divObj.childNodes[k].style.background="#0080ff";
if(tag==0)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{}
else
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
k++;
if(k>=num)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
k=0;
}
}
}
if(key==38)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
//divObj.childNodes[k].style.background="#0080ff";
k--;
if(k<0)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
k=num-1;
}
}
for(var i=0;i<num;i++)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(i==k)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
divObj.childNodes[i].style.background="#0080ff";
document.getElementById("key").value=divObj.childNodes[i].innerText;
}
else
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
divObj.childNodes[i].style.background="";
//document.getElementById("key").value=divObj.childNodes[i].innerText;
}
}
}
tag=1;
if(key==13)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(divObj.style.display=="")
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
divObj.style.display="none";
}
else
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
divObj.style.display="";
}
}
}
//******************************************* 测试数组 ***********************************
var arr="A,B,C,D,E,F,H";
var t=0;
function getArray()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var str=document.getElementById("AVG").value;
var alist=arr.split(',');
for(var i=0;i<alist.length;i++)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(alist[i]==str)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
t=1;
}
}
if(t==1)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
arr="";
for(var i=0;i<alist.length;i++)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(alist[i]!=str)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
arr+=alist[i]+",";
}
}
arr=arr.substring(0,arr.length-1);
t=0;
}
else
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
arr=arr+","+str;
}
alert(arr);
}
</
script
>
</
head
>
![](/Images/OutliningIndicators/None.gif)
<
body
>
当一个字符数组含有某一个元素时删除它,如果没有该元素,则增加到数组中去
<
br
>
<
input
id
="AVG"
type
=text
value
="输入字符"
/>
<
input
type
=button
onclick
="getArray()"
value
="测试数组"
/><
p
><
p
><
p
><
p
><
p
>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
language
='javascript'
>
document.write(getstring())
</
script
>
双击显示下拉列表后可以用键盘的上下键选择,也可以用回车键显示下拉列表
<
div
id
="Menu"
style
="background:#008080;display:none;cursor:default"
>
<
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
>
转载于:https://www.cnblogs.com/hzuIT/articles/1041780.html