网站导航网学 原创论文 原创专题 网站设计 最新系统 原创论文 论文降重 发表论文 论文发表 UI设计定制 论文答辩PPT格式排版 期刊发表 论文专题
返回网学首页
网学原创论文
最新论文 推荐专题 热门论文 论文专题
当前位置: 网学 > 设计资源 > 表单美化 > 正文

html中select类型的表单既能输入又能选择

论文降重修改服务、格式排版等 获取论文 论文降重及排版 论文发表 相关服务

<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表单验证
  • 设为首页 | 加入收藏 | 网学首页 | 原创论文 | 计算机原创
    版权所有 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2020 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号 常年法律顾问:王律师