加入收藏
联系我们
关于我们
 您现在的位置: 亿聪 >> 网络学院 >> 网站设计 >> HTML/CSS >> 正文  
  为HTML的Select加一个输入的方法         ★★★
为HTML的Select加一个输入的方法
[ 作者:xieyj    转贴自:CSDN    点击数:11159    更新时间:2004/12/15    文章录入:亿聪 ]

<Html>
 <Head>
  <SCRIPT LANGUAGE="javascript">
  <!--
  //定义 select 原值
  var oldValue,oldText;
  //select下拉框的onkeydown事件,修改下拉框的值
  function catch_keydown(sel){
   switch(event.keyCode) {
    case 13: //回车键
     event.returnValue = false;
     break;
    case 27: //Esc键
     sel.options[sel.selectedIndex].text = oldText;
     sel.options[sel.selectedIndex].value = oldValue;
     event.returnValue = false;
     break;
    case 8:  //空格健
     var s = sel.options[sel.selectedIndex].text;
     s = s.substr(0,s.length-1);
     if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text){
      sel.options[sel.selectedIndex].value=s;
      sel.options[sel.selectedIndex].text=s;
     }
     event.returnValue = false;
     break;
   }
   if (!event.returnValue && sel.onchange)
    sel.onchange(sel)
  }

  //select下拉框的onkeypress事件,修改下拉框的值
  function catch_press(sel){
   if(sel.selectedIndex>=0){
    var s = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);
    if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text){
     sel.options[sel.selectedIndex].value=s;
     sel.options[sel.selectedIndex].text=s;
    }
    event.returnValue = false;
    if (!event.returnValue && sel.onchange)
     sel.onchange(sel)
   }
  }

  //select下拉框的onfocus事件,保存下拉框原来的值
  function catch_focus(sel) {
   oldText = sel.options[sel.selectedIndex].value;
   oldValue = sel.options[sel.selectedIndex].value;
  }

  //select 选择框鼠标上移时提示选择的内容
  function selMouseOver(obj){
   with (document.all.div_hint){
   innerText = obj.options[obj.selectedIndex].text;
   if (innerText.length > 0){
    innerText = " " + innerText + "  ";
    style.display = "block";
    style.left = event.clientX + 16;
    style.top = event.clientY;
    }
   }
  }
  //select 选择框鼠标移开时消失
  function selMouseOut(obj){
   with (document.all.div_hint){
    style.display = "none"
   }
  }
  //-->
  </SCRIPT>
 </Head>
 <Body>
  <!--调用-->
  <select style='width:130px;z-index:-1' name='tmpSel' onmouseover=selMouseOver(this) onmouseout=selMouseOut(this) onkeydown=catch_keydown(this) onkeypress=catch_press(this) onfocus=catch_focus(this)>
   <option value=''></option>
  </select>

  <!--提示块-->
  <div id=div_hint style="font-size:12px;color:red;display:none;position:absolute; z-index:2; top:200;background-color: #F7F7F7; layer-background-color: #0099FF; border: 1px #9c9c9c solid;filter:Alpha(style=0,opacity=80,finishOpacity=100);"></div>

 </Body>
</Html>

  • 上一篇文章: 网页HEAD区代码规范

  • 下一篇文章: 没有了
  • 发表评论】【告诉好友】【打印此文】【关闭窗口
     最新5篇热点文章
  • Knoppix 4.0.2 免硬盘免安…[15795]

  • 通过ASP记录进行分页[20010]

  • ASP开发准则[11930]

  • ASP组件指南[11941]

  • ASP指南[11964]

  •  
     最新5篇推荐文章
  • Knoppix 4.0.2 免硬盘免安…[15795]

  • 如何让Win 2003系统更加安…[13299]

  • Nero超刻简明教程[34137]

  • PS商业实战-来杯茶,行吗?…[7253]

  • ASP深度揭密(下)[12551]

  •  
     相 关 文 章
    没有相关文章

      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
        没有任何评论
    设为首页 | 加入收藏 | 关于我们 | 联系我们 | 友情链接 | 版权声明 | 管理登录
    Copyright © 2000-2022 Yicong.com.All Rights Reserved.
    亿聪 版权所有 E-mail: