您好网科网络欢迎您-西安网站建设您好,网科创想为您服务-西安网站制作西安网站建设专家  
首页经典案例网站制作软件开发 域名主机网站推广联系我们
      技术资料
html 中 select 类型的表单既能输入又能选择
发布:2010-02-26 ...  来源: 西安网科网络科技有限公司 转载请注明:来自网科创想

<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>
本文摘自: 西安php服务社区(http://www.php029.cn) 详细出处请参考:http://www.php029.cn/viewthread.php?tid=137&extra=page%3D3

 
1/不超过10个页面
2/国际域名,300M空间
3/内含新闻系统、产品系统、在线互动
4/免费站点统计、傻瓜式后台操作
1/精美页面设计(可含FLASH)
2/国际域名,500M空间
3/内含信息发布系统、产品管理系统...
4/可含多级分类、提供域名备案...
1/精美页面设计(可含FLASH)
2/国际域名,1G商务主机
3/web最流行语言PHP开发...
4/免费终身维护、提供域名备案...
网站建设专线: 029-85458571
网站改版专线: 13379086051
网站推广专线: 029-85075855
技术支持专线: 15319961940
公司服务专线: 029-85458571
公司传真号码: 029-85458571
 QQ: 494145261 360811363
  309824428 549966588
php0@qq.com php-5@qq.com
网址: www.xanet.net www.xawk.net
地址: 西安市雁塔北路8号万达广场
  一栋二单元20712室


首页 | 经典案例 | 网站制作 | 软件开发 | 域名主机 | 网站推广 | 联系我们 | 技术资料 | 网科CRM
版权所有:西安网科网络科技有限公司-西安网站建设  地址:西安市雁塔北路8号万达广场一栋二单元0712室
客服电话:029-85458571  销售:15319961940  售后:13379086051
陕ICP备09020140号 传真:029-85458571