一个有用的Javascript，onkeydown and Option selected - WEB标准网站设计心得 - DonewsBlog

一个有用的Javascript，onkeydown and Option selected

某人提出的要求，我在网上找的代码,改了一下,FF和IE都支持
这个脚本的用处就是你在input 输入框里面输入英文字母（比如D）的时候，旁边的SELECT里面有相应这个字母D开头的就会标蓝选中，如果是单选就会出现在最上面，可以应用在邮件系统里面的输入邮件地址那里。

在线运行演示

<script type="text/JavaScript">function smartOptionFinder(oSelect, oEvent) {	var sKeyCode = oEvent.keyCode;	var sToChar = String.fromCharCode(sKeyCode);	if(sKeyCode >47 && sKeyCode<91){		var sNow = new Date().getTime();		if (oSelect.getAttribute("finder") == null) {			oSelect.setAttribute("finder", sToChar.toUpperCase())			oSelect.setAttribute("timer", sNow)		} else if( sNow > parseInt(oSelect.getAttribute("timer"))+2000) { //Rest all;			oSelect.setAttribute("finder", sToChar.toUpperCase())			oSelect.setAttribute("timer", sNow) //reset timer;		} else {			oSelect.setAttribute("finder", oSelect.getAttribute("finder")+sToChar.toUpperCase())			oSelect.setAttribute("timer", sNow); //update timer;		}		var sFinder =  oSelect.getAttribute("finder");		var arrOpt = oSelect.options		var iLen = arrOpt.length		for (var i = 0; i < iLen ; i++) {			sTest  = arrOpt[i].text			if (sTest.toUpperCase().indexOf(sFinder) == 0) {				arrOpt[i].selected = true;				break;			}		}			} else{			}}</script><form name=formName id="formName"><select name="userid"   style="width:140px;height:90px" multiple ><OPTION VALUE="George">George</OPTION>		<OPTION VALUE="Fred">Fred</OPTION>		<OPTION VALUE="Ryan">Ryan</OPTION>		<OPTION VALUE="Angela">Angela</OPTION>		<OPTION VALUE="Jill">Jill</OPTION>		<OPTION VALUE="Fred">Fred</OPTION>		<OPTION VALUE="Ryan">Ryan</OPTION>		<OPTION VALUE="Angela">Angela</OPTION>		<OPTION VALUE="Jill">Jill</OPTION>		<OPTION VALUE="Fred">Fred</OPTION>		<OPTION VALUE="Ryan">Ryan</OPTION>		<OPTION VALUE="Angela">Angela</OPTION>		<OPTION VALUE="Jill">qwill</OPTION></select><input type="text" onkeydown="smartOptionFinder(document.forms.formName.userid,event);" ></form>

Trackback: http://tb.donews.net/TrackBack.aspx?PostId=484363

[点击此处收藏本文] 发表于2005年07月28日 12:30 AM

正在读取评论……

添加评论

大名

网址

验证码

评论

记住我