网站导航免费论文 原创论文 论文搜索 定作论文 网学软件 学术大家 资料中心 会员中心 问题解答 定作论文 论文素材 设计下载 最新论文 下载排行 论文上传 在线投稿 联系我们
返回网学首页
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 设计资源 > 表单美化 > 正文
html 中 select 类型的表单既能输入又能选择
来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: Admin 发布时间: 09/04/16

<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>

  • 下一篇资讯: HTML表单验证
  • 网学推荐

    免费论文

    原创论文

    浏览:
    设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
    版权所有 电话:013574892963 QQ:3710167 邮箱:Educs@163.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2015 Www.myeducs.Cn All Rights Reserved
    湘ICP备09003080号