具有edit功能的select

Kiyo • 2008年01月1日 00:01 • JavaScript/Jscript • 28 阅读

具有edit功能的select
--------------------------------
1、
<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>

2、
function getLeftPostion( theObj )
{
  var pos = 0;
  while ( theObj != null )
  {
    pos += theObj.offsetLeft;
    //get the Object which contain theObj.
    theObj = theObj.offsetParent;
  }
  return pos;
}
function getTopPostion( theObj )
{
  var pos = 0;
  while ( theObj != null )
  {
    pos += theObj.offsetTop;
    //get the Object which contain theObj.
    theObj = theObj.offsetParent;
  }
  return pos;
}
function checkVersion()
{
  var isBadVersion=true;
  var curVer=navigator.appVersion;
  var pos=parseInt(curVer.indexOf("MSIE"));
  if (pos>=1)
  {
    var intVer=parseInt(curVer.charAt(pos+5));
    if (intVer>=5)
    { isBadVersion=false;}
  }
  if (isBadVersion)
  {
    var msg="This page may not be displayed properly:\n"+
            " This product requires Microsoft Internet Explorer 5 or later browser only.";
    alert(msg);
  }
}

//check the browser version
checkVersion();

// the array of comboBoies
theArray = new Array();

function combobox(objId, objHandler)
{
    this.comObj = document.all[objId];
    this.comObj.selectedIndex = -1;
    this.getvalue = getvalue;
    this.doResize = doResize;
    this.doChange = doChange;
    this.loseFocus = loseFocus;
    this.doSelectIdx = doSelectIdx;
    this.focus = focus;
    this.keyPress = keyPress;
    this.change = change;

var strMsg="";

//------------------------------------------------------------------------------------------------------
// create the text object
//------------------------------------------------------------------------------------------------------
var txtObjIdName = objId + "_text";

    if (document.all[txtObjIdName] != null)
    {
        strMsg="The following id: '" + txtObjIdName +"' is used internally by the Combo Box!\r\n"+
           "Use of this id in your page may cause malfunction. Please use another id for your controls.";
        alert(strMsg);
    }

var txtInner = "<INPUT type='text' id=" + txtObjIdName + " name=" + txtObjIdName + " onblur='" + objHandler + ".loseFocus()' " + " onkeyup='" + objHandler + ".keyPress()'" + " onchange='" + objHandler + ".keyPress()'" + " style='display: none; position: absolute' value='' >";

this.comObj.insertAdjacentHTML("afterEnd", txtInner);

this.txtObj = document.all[txtObjIdName];

//------------------------------------------------------------------------------------------------------
// end
//------------------------------------------------------------------------------------------------------

    this.beResizing = false;
    this.doResize();
    theArray[theArray.length] = this;
}

function loseFocus()
{
    var theComObj = this.comObj;
    var theTxtObj = this.txtObj;
    var i;
    theComObj.selectedIndex = -1;

    if (theTxtObj.value == "")
    {
        return;
    }

    var optLen = theComObj.options.length;
    for (i=0; i<optLen; i++)
    {
        var comVal = theComObj.options[i].text;
        var txtVal = theTxtObj.value;

        if (comVal == txtVal)
        {
            theComObj.selectedIndex = i;
            return;
        }
    }
}

function doResize()
{
    if (!this.beResizing)
    {
        this.beResizing = true;
        this.txtObj.style.display="none";
        this.comObj.style.position="static";
        this.txtObj.style.posLeft = getLeftPostion(this.comObj);
        this.txtObj.style.posTop = getTopPostion(this.comObj) + 1;
        this.txtObj.style.posWidth = this.comObj.offsetWidth - 16;
        this.txtObj.style.posHeight = this.comObj.offsetHeight;
        this.comObj.style.position ="absolute";
        this.comObj.style.posLeft = this.txtObj.style.posLeft;
        this.comObj.style.posTop = this.txtObj.style.posTop;
        this.offWidth = this.comObj.offsetWidth;

        var strRect = "rect(0 "+(this.comObj.offsetWidth)+" "+ this.comObj.offsetHeight + " "+(this.txtObj.style.posWidth - 2 )+")";

        this.comObj.style.clip = strRect;
        this.txtObj.style.display="";
        this.beResizing = false;
    }
}

function doChange()
{
    var idx = this.comObj.selectedIndex;
    var opt = this.comObj.options[idx];
    this.txtObj.value = opt.text;
    this.txtObj.focus();
    this.txtObj.select();
    this.comObj.selectedIndex=-1;
}

function getvalue()
{
return this.txtObj.value;
}

function doSelectIdx(i)
{
var optLen = this.comObj.options.length;

    if ((i >=0) && (i < optLen))
    {
        this.comObj.selectedIndex = i;
        this.txtObj.value = this.comObj.options[i].text;
        return;
    }
    this.txtObj.value = "";
}

function focus()
{
this.txtObj.focus();
}

/*resize all combobox when window be resized*/
function resetAllSize()
{
    var i;
    for (i=0; i < theArray.length; i++)
    {
        theArray[i].doResize();
    }
}
////////////////定位函数开始，我加的///////////////
function keyPress()
{
    var txtStr;
    var comStr;
    var maxInt = 0;
    var defInt = 0;
    var defJ;
    txtStr = this.txtObj.value;
    //document.form1.test.value=txtStr;
    var j;
    for(j=0;j<this.comObj.options.length;j++)
    {
        comStr = this.comObj.options[j].text;
        var m;
        for(m=0;m<txtStr.length+1;m++)
        {
            if(txtStr.charCodeAt(m) != comStr.charCodeAt(m))
            {
                maxInt = m;
                break;
            }
        }
        if (defInt < maxInt)
        {
            defInt = maxInt;
            defJ = j;
        }
    }
    this.comObj.selectedIndex = defJ;
}

版权声明：
作者：Kiyo
链接：https://www.wkiyo.cn/html/2008-01/i120.html
来源：Kiyo's space
文章版权归作者所有，未经允许请勿转载。

THE END

二维码

具有edit功能的combobox

< <上一篇

日期控件

下一篇>>

搜索内容

具有edit功能的select

共有 0 条评论

恶灵鸡汤

标签云