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

Javascript
Mootools 1.2教程 排序类和方法简介
Mootools 1.2 手风琴(Accordion)教程
Mootools 1.2教程 类(一)
Mootools 1.2教程 Tooltips
Mootools 1.2教程 选项卡效果(Tabs)
Mootools 1.2教程(21):类(二)
Mootools 1.2教程 同时进行多个形变动画
Mootools 1.2教程 滑动效果(Slide)
不安全的常用的js写法
javascript 检测浏览器类型和版本的代码
javascript 弹出层居中效果的制作
javascript 遮照层效果
Javascript createElement和innerHTML增加页面元素的性能对比
颜色快速采集器javascript代码
var与Javascript变量隐式声明
javascript 面向对象编程 万物皆对象
jQuery 事件队列调整方法
JavaScript switch case 的用法实例[范围]
控制input的CSS但不影响CheckBox以及Radio的样式
ext 同步和异步示例代码

Javascript 中的 具有edit功能的combobox


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 230 ::
收藏到网摘: 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>