当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 具有edit功能的combobox

Javascript
javascript 异常处理使用总结
ExtJS扩展 垂直tabLayout实现代码
JavaScript 新手24条实用建议[TUTS+]
PNG背景在不同浏览器下的应用
实现超用户体验 table排序javascript实现代码
利用JQuery为搜索栏增加tag提示
JQuery 前台切换网站的样式实现
WordPress JQuery处理沙发头像
js form 验证函数 当前比较流行的错误提示
JQuery 无废话系列教程(一) jquery入门 [推荐]
jQuery 表单验证插件formValidation实现个性化错误提示
JQuery 入门实例1
jQuery 可以拖动的div实现代码 修正版
javascript DOM对象的学习实例代码
css 二级菜单 实现代码集合 修正版
ExtJS GTGrid 简单用户管理
jQuery DIV弹出效果实现代码
Javascript 调试利器 Firebug使用详解六
深入javascript json QQ网页登陆
类似新浪网的 弹出视频功能实现代码

Javascript 中的 具有edit功能的combobox


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 208 ::
收藏到网摘: n/a

这是一个自己编写的htc控件

<HTML>
 <HEAD>
 <PUBLIC>
  <COMPONENT TAGNAME="COMBOBOX">
  <PROPERTY NAME="Text" GET="get_Text" PUT="put_Text">
  <PROPERTY NAME="Width" GET="get_Width" PUT="put_Width">
  <METHOD NAME="SetFocus" INTERNALNAME="htcFocus">
  <METHOD NAME="AddItems" INTERNALNAME="htcAddItems"> 
  <EVENT NAME="onYYCenter" ID="idEnter">
  <EVENT NAME="onYYCChoose" ID="idChoose">
  <ATTACH EVENT="oncontentready" ONEVENT="htcInit()">
  </COMPONENT>
 </PUBLIC>
 <SCRIPT LANGUAGE="javascript">
  function htcInit()
  {
 defaults.viewLink=document;
 defaults.viewInheritStyle=false;
 Body_Init();
  }
  function htcAddItems(items)
  {
 var i,len;
 len=pCombo.options.length;
 for(i=0;i<len;i++)
 {pCombo.remove(0);}
 for(i=0;i<items.length;i++)
 {
  var o;
  if((typeof items[i])=='string')
  {
   if(!HasTheValue(items,i))
   {
    o=document.createElement('OPTION');
    o.text=items[i];
    pCombo.add(o);
   }
  }
 }
  }
  function htcFocus()
  {
   pText.focus();
  }
  function get_Text()
  {
 return pText.value;
  }
  function put_Text(Value)
  {
 pText.value=Value;
  }
  function get_Width()
  {
 return pCombo.style.width;
  }
  function put_Width(Value)
  {
 pCombo.style.width=Value;
  }
 </SCRIPT>

 <SCRIPT LANGUAGE="javascript">
  function Body_Init()
  {
 var iRight=pCombo.clientWidth;
 var iBottom=pCombo.clientHeight;
 var iLeft=(pCombo.clientWidth-18);
   pCombo.style.clip='rect(0,'+iRight+','+iBottom+','+iLeft+')';
 pText.style.width=(pCombo.clientWidth);
 pText.style.height=(pCombo.clientHeight);
 pText.style.top=0;
 pText.style.left=0;
  }
  function Combo_Select()
  {
 pText.value=pCombo.options[pCombo.selectedIndex].text;
  }
  function Text_ChkKey()
  {
   if(event.keyCode==13)
     {
  idEnter.fire();
 }
  }
  function HasTheValue(sitems,i)
  {
 var ii;
 for(ii=0;ii<i;ii++)
 {
  if(sitems[ii]==sitems[i])
   return true;
 }
 return false;
  }
 </SCRIPT>
 </HEAD>
 <BODY>
  <SELECT STYLE="position:absolute;left:0;top:0;" ONCHANGE="Combo_Select()" NAME="pCombo">
  </SELECT>
  <INPUT STYLE="position:absolute;left:0;top:0;z-index:4000" onKeyPress="Text_ChkKey()" TYPE="TEXT" NAME="pText">
  </BODY>
</HTML>