在web上打造可输入下拉列表

最新推荐文章于 2023-04-07 14:53:27 发布

Wish-Way

最新推荐文章于 2023-04-07 14:53:27 发布

阅读量1.8k

点赞数

分类专栏： Web开发技术文章标签： web function div javascript input

本文链接：https://blog.csdn.net/osion/article/details/1808763

版权

Web开发技术专栏收录该内容

19 篇文章 0 订阅

订阅专栏

　闲话：每次作到有默认又可以自定义的表单时，就开始头痛。又是输入框又是下拉框的，先不说用户在用时会不会晕，自己看了都头晕。一直在幻想有没一个象VB里的下拉框一样，又能输入又能选择的。以前从网上找了不少这方面的用js的组合，一堆js代码是一定了，但是使用麻烦，效果不怎么样，而且还很消耗客户端的资源。两天前在google处看到一个很cool的能输入下拉框组合。曾想拿过来用，但是Google的js程序员太牛气了，光一个js类洋洋洒洒写了一大篇。想从中抽出需要的代码，那简直是大海里捞针，一激之下，仿了一个，以下是运行原理和原码。

　正文：
　　参与插件：
　　　　select(下拉框：默认display:none)×1，text(文本框)×1，主div(层)×1，辅div(层)×n
　　原理：
　　text.onfocus事件中从select中读取option项以一个option一个div的方式将option项加载到div内，并将div定位到text的下面，并同步div和text的宽度，然后div显示，激活select隐藏函数，将div覆盖到的select的visibility属性全设置为hidden(因为在IE中div是遮不住select的)，同时向text加载各种必要的事件，确保能及时的作出反应。
　　text.onclick加载与onfocus一样的函数，可以确保用户的重复使用。
　　text.onkeyup加载匹配功能，用户在文本框内输入资料时自动匹配相符合的option项。
　　text.onblur判断操作真的结束后(m_intTextSelectIn=true)将div.display设置为none使div隐藏，并激活select显示函数，将一开始被隐藏的select显示出来。

　　主div.onmouseout将m_intTextSelectIn设置为false锁定结束标识，并将焦点赋给text，避免鼠标未作选择，但已经离开了文本框和主div。
　　主div.onmouseover将m_intTextSelectIn设置为true释放被锁定的结束标识

　　辅div.onmouseover修改当前div的背景，表示鼠标正处于该div上方。
　　辅div.onclick将m_intTextSelectIn设置为true释放被锁定的结束标识，并将outerText赋值给text.value。最后将焦点赋给text，然后再blur将焦点弹开(本操作在Firefox里提示出错，但不影响使用)，激活text.onblur事件。

　　以上即时这个下拉输入框的工作基本原理。还有一些小细节，如主div超出限定长度后会出现下拉框，主div的命名之类的。还有特别注明一下代码里的getPosition、HideOverSels、Obj1OverObj2均出至51js版主宝玉大侠之手，特此鸣谢。^^
　　以下是作好的js代码，给有需要的朋友：

/*---------------------------------textselect.js--------------------------------------------------*/

var m_strTextselectDiv="Textselectshow_Div"
var m_intTextSelectIn=false
var ie=(document.getElementById && document.all);

for(var IDx=0,IDy='';document.getElementById(m_strTextselectDiv)!=null;IDx++,IDy=IDx){
m_strTextselectDiv=(document.getElementById(m_strTextselectDiv + IDy)==null)?m_strTextselectDiv + IDy:m_strTextselectDiv
}
document.write ('<div id="' + m_strTextselectDiv + '" style="position: absolute;cursor: default;border: 1px solid #B2B2B2;background-color: #fff;display: none;"></div>')
// 获取对象的坐标
function getPosition(Obj)
{
try{
for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft,Obj=Obj.offsetParent);
return {left:sumLeft,top:sumTop}
}catch(e){}
}
//处理Div中的选项/* 某个选项，输入框的ID号 */
function divOnmoveover(obj,objText)
{
var MM_objText=document.getElementById(objText)

var objChilddiv=obj.parentNode.getElementsByTagName("div")
for(var x=0;x<objChilddiv.length;x++){objChilddiv[x].style.cssText=''}
obj.style.cssText='background-color: #330066;color: #ffffff;'

obj.οnclick=function(){
m_intTextSelectIn=false
if(ie)
{MM_objText.value=obj.outerText}
else
{MM_objText.value=obj.textContent}
MM_objText.focus()
MM_objText.blur()
}
}

// 隐藏被ID为objID的对象（层）遮挡的所有select
function HideOverSels(objID)
{
var sels = document.getElementsByTagName('select');
for (var i = 0; i < sels.length; i++)
if (Obj1OverObj2(document.getElementById(objID), sels[i]))
sels[i].style.visibility = 'hidden';
else
sels[i].style.visibility = 'visible';
}

//判断obj1是否遮挡了obj2
function Obj1OverObj2(obj1, obj2)
{
var pos1 = getPosition(obj1)
var pos2 = getPosition(obj2)
var result = true;
var obj1Left = pos1.left - window.document.body.scrollLeft;
var obj1Top = pos1.top - window.document.body.scrollTop;
var obj1Right = obj1Left + obj1.offsetWidth;
var obj1Bottom = obj1Top + obj1.offsetHeight;
var obj2Left = pos2.left - window.document.body.scrollLeft;
var obj2Top = pos2.top - window.document.body.scrollTop;
var obj2Right = obj2Left + obj2.offsetWidth;
var obj2Bottom = obj2Top + obj2.offsetHeight;

if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||
obj1Left >= obj2Right || obj1Top >= obj2Bottom)
result = false;
return result;
}

/*---------------------------------textselect.js--------------------------------------------------*/

以下是使用例子。太晚了，不想写太多了，直接看例子。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 下拉输入框整理 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script language="javascript" type="text/javascript" src="textselect.js"></script>
<body style="font-size:12px">
<input type="text" name="" size="10" οnfοcus="javascript:showSelect(this,'select1')"><select name="select1" id="select1" style="display: none" disabled>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<input type="text" name="" id="a" οnfοcus="javascript:showSelect(this,'select2')"><select name="select2" id="select2" style="display: none" disabled>
<option value="a">a</option>
<option value="b">b</option>
</select><br/>
<select id="hidden">
<option value="i">i</option>
<option value="j">j</option>
</select>
</body>
</html>

本程序在window 2000、IE6及Firefox1.01下测试通过。

闲话：由于写时一脑子激动，有点忘形之意，所以代码有点繁琐，大家有能力的话最好是优化一下后再使用。当然直接使用也不会怎么。另外欢迎各位有手机的朋友到我的“海鱼手机加瓦站(http://wwww.fishjava.com)”来转转，有不少的免费的手机游戏和图片提供给各位，不但可以在线试玩游戏，直接通过WAP下载游戏和图片，还能自己上传一些好玩的游戏或图片上来大家一起来玩。

下面是本人参考部分资料，利用各种方式写的代码，比较精简

<br>
<br>eeeeeeeeeeeeeeeeeeee

<table width="742" border="1" cellpadding="0" cellspacing="0">

<tr>
<td width="742" height="25" valign="top" class="style1">

<select   name="select" style=" position:absolute; width:160px; height:60px; clip:rect(0 160 60 142); " οnchange="document.all('idText').value=(this.value);">
              <option value="1234567">1234567</option>
              <option value="bbbbbbbbbbbb">bbbbbbbbbbbb</option>
              <option value="cccccccccccc">cccccccccccc</option>
              <option value="dddddddddddd">dddddddddddd</option>
          </select>
   <INPUT TYPE="text" id="idText" value="我们克玩咧" style=" position:absolute;width=142" >
<br><br>

<br>
<br>eeeeeeeeeeeeeeeeeeee

      <span style=" margin-left:150px;width:18px;border:1px solid red;">

      <select name="r00" style="margin-left:-150px;width:168px;" onChange="javascript:document.all.question.value=this.value;">
        <option value="您的宠物的名字">您的宠物的名字</option>
        <option value="您身份证的最后3位">您身份证的最后3位</option>
        <option value="您的启蒙老师">您的启蒙老师</option>
        <option value="您最喜欢的食物">您最喜欢的食物</option>
        <option value="您最喜欢的一首歌">您最喜欢的一首歌</option>
        <option value="您最喜欢的一首歌">您最喜欢的一首歌</option>
      </select>

      </span>

   ＊</font> 如果您的密码丢失，根据此可重获密码</td>
</tr>
<tr>
    <td height="3"></td>
</tr>
</table>

<%
aa=trim(request.Form("clientUser"))
response.Write aa
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title></title>
</head>
<body>
<form method="post" action="zw11.asp">
<select name="select" style="position:absolute; left: 197px; top: 80px; width: 120px; height: 22px; clip: rect(0 120 22 100)" οnchange="clientUser.value=select.options[select.selectedIndex].text;clientUser.select()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="text" name="clientUser" style="position:absolute; left: 198px; top: 81px; width: 100px; height: 18px" value="请选择二批名称" οnfοcus="this.select();">
<input type="submit" name="Submit" value="添加">
</form>
</body>
</html>

<%
aa=trim(request.Form("s1"))
response.Write aa
%>
<html>
<head>
<title></title>
<script language="JavaScript">

</script>
</head>
<body οnlοad="s1.focus();">
<h3>操作方法:</h3>
<p>
1.按Enter键开始添加输入新的选项...<br>
2.按Del键删除当前选项...<br>
3.按Esc键查看当前选项的text和value值...<br>
4.按BackSpace键删除当前选项的前一个字符...<br>
</p>
<p>
<form method="post" action="zw00.asp">
<select name="s1" οnkeydοwn="catch_keydown(this);" οnkeypress="catch_press(this);" style="font-size:12px;">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" name="Submit" value="添加">
</form>
</p>
</body>
</html>

<%
aa=trim(request.Form("MdcCombo1"))
response.Write aa
%>
<script>
function loaditem(){
     with(document.all.MdcCombo1){
          AddItem("aaaaaa")
          AddItem("bbbbbb")
          AddItem("cccccc")
          AddItem("dddddd")
          AddItem("eeeeee")
          AddItem("ffffff")
      }
}
</script>
<body onLoad="loaditem()">
<form method="post" action="zw55.asp">
<OBJECT classid=clsid:8BD21D30-EC42-11CE-9E0D-00AA006002F3 id=MdcCombo1 name=MdcCombo1 VIEWASTEXT>
<PARAM NAME="VariousPropertyBits" VALUE="746604571">
<PARAM NAME="BackColor" VALUE="2147483653">
<PARAM NAME="ForeColor" VALUE="2147483656">
<PARAM NAME="MaxLength" VALUE="0">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="ScrollBars" VALUE="0">
<PARAM NAME="DisplayStyle" VALUE="3">
<PARAM NAME="MousePointer" VALUE="0">
<PARAM NAME="Size" VALUE="2540;635">
<PARAM NAME="PasswordChar" VALUE="0">
<PARAM NAME="ListWidth" VALUE="0">
<PARAM NAME="BoundColumn" VALUE="1">
<PARAM NAME="TextColumn" VALUE="65535">
<PARAM NAME="ColumnCount" VALUE="1">
<PARAM NAME="ListRows" VALUE="8">
<PARAM NAME="cColumnInfo" VALUE="0">
<PARAM NAME="MatchEntry" VALUE="1">
<PARAM NAME="ListStyle" VALUE="0">
<PARAM NAME="ShowDropButtonWhen" VALUE="2">
<PARAM NAME="ShowListWhen" VALUE="1">
<PARAM NAME="DropButtonStyle" VALUE="1">
<PARAM NAME="MultiSelect" VALUE="0">
<PARAM NAME="Value" VALUE="">
<PARAM NAME="Caption" VALUE="">
<PARAM NAME="PicturePosition" VALUE="458753">
<PARAM NAME="BorderColor" VALUE="2147483654">
<PARAM NAME="SpecialEffect" VALUE="2">
<PARAM NAME="Accelerator" VALUE="0">
<PARAM NAME="GroupName" VALUE="">
<PARAM NAME="ParagraphAlign" VALUE="1">
</OBJECT><br><br>
<input type="submit" name="Submit" value="ww">
</form>
</body>

Wish-Way

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
在web上打造可输入下拉列表

闲话：每次作到有默认又可以自定义的表单时，就开始头痛。又是输入框又是下拉框的，先不说用户在用时会不会晕，自己看了都头晕。一直在幻想有没一个象VB里的下拉框一样，又能输入又能选择的。以前从网上找了不少这方面的用js的组合，一堆js代码是一定了，但是使用麻烦，效果不怎么样，而且还很消耗客户端的资源。两天前在google处看到一个很cool的能输入下拉框组合。曾想拿过来用，但是Google的js程序员太
复制链接

扫一扫