浏览器大全:是一个提供流行浏览器教程、在线学习分享的学习平台!

下拉菜单支持输入,并根据输入内容自动定位

下拉菜单支持输入,并根据输入内容自动定位:

参考:演员发表于 10/23/2001 8:58:16 AM 的文章 “罗亭的可输入下拉框的解密简化版.”,在此特别感谢相关人等。

本文为这个下拉框增加了一点小小的功能:输入能够定位在已有的选择框内。还有一个缺点,各位给改改:输入的时候不能够自动拉开选择框,怎么办?

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;
}


相关软件

2345加速浏览器官方版

2345加速浏览器官方版 | 56.2MB

2345加速浏览器官方版

新一代2345加速浏览器采用Chromium和IE双内核,主打极速与安全特性。基于Chromium深度定制,引入网页智能预加载技术,访问网页更快速..

QQ浏览器官方正式版

QQ浏览器官方正式版 | 49.67MB

QQ浏览器官方正式版

QQ浏览器秉承TT浏览器1-4系列方便易用的特点,但技术架构不同,交互和视觉表现也重新设计,采用Chromium内核+IE双内核,让浏览快速稳定...

百度浏览器最新版下载

百度浏览器最新版下载 | 13.3MB

百度浏览器最新版下载

q百度浏览器,是一款简洁轻快、智能懂你的浏览器。依靠百度强大的搜索平台,在满足用户浏览网页的基础上,它整合百度体系业务优势,带给用户更方便的浏览方式功能...

UC浏览器官方正式版

UC浏览器官方正式版 | 44.2MB

UC浏览器官方正式版

UC浏览器(UC Browser)是UC Mobile Limited在2004年8月开发的一款软件,分uc手机浏览器和uc浏览器电脑版。UC浏览器是全球使用量最大的第三方手机浏览器...

猎豹浏览器2022最新版下载

猎豹浏览器2022下载 | 45MB

猎豹浏览器2022最新版下载

猎豹安全浏览器对Chrome的Webkit内核进行了超过100项的技术优化,访问网页速度更快。其具有首创的智能切换引擎,动态选择内核匹配不同网页...

360安全浏览器官方版下载

360安全浏览器下载 | 21.4MB

360安全浏览器官方版下载

360安全浏览器拥有全国最大的恶意网址库,采用恶意网址拦截技术,可自动拦截挂马、欺诈、网银仿冒等恶意网址。独创沙箱技术,在隔离模式即使访问****也不会感染...