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

Javascript
有趣的script标签用getAttribute方法来自脚本吧
学习YUI.Ext 第二天
学习YUI.Ext 第三天
学习YUI.Ext第五日--做拖放Darg&Drop
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
学习YUI.Ext 第七天--关于View&JSONView
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
对YUI扩展的Gird组件 Part-2
Gird事件机制初级读本
为Yahoo! UI Extensions Grid增加内置的可编辑器
如何简单地用YUI做JavaScript动画
(function(){})()的用法与优点
JS层移支示例代码
如何在Web页面上直接打开、编辑、创建Office文档
网页中实现浏览器的最大,最小化和关闭按钮
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
图片自动缩小的js代码,用以防止图片撑破页面
收藏一些不常用,但是有用的代码
解决 firefox 不支持 document.all的方法
用ajax实现的自动投票的代码

Javascript 中的 具有edit功能的combobox


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