武汉之窗软件频道
您现在的位置:
武汉之窗软件频道
>JS模仿IE自动完成功能支持Firefox
JS模仿IE自动完成功能支持Firefox
作者:
出处:蓝色理想
责任编辑:龙犊
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> body,div { font-family:verdana; line-height:100%; font-size:9pt; } input { width:300px; } h1 { text-align:center; font-size:2.2em; } #divf { margin:10px; font-size:0.8em; text-align:center; } #divc { border:1px solid #333333; } .des { width:500px; background-color:lightyellow; border:1px solid #333; padding:20px; margin-top:20px; } .mouseover { color:#ffffff; background-color:highlight; cursor:default; } .mouseout { color:#000000; background-color:#ffffff; cursor:default; } </style> <SCRIPT LANGUAGE="JavaScript"> <!-- // script by blueDestiny // email : blueDestiny [at] 126 . com // Object: jsAuto // browser: ie, mf. // example: // step1 : // create autocomplete container, return object and bind event to the objce, and ///create a new jsAuto instance: // <div id="divautocomplete"></div> // var autocomplete = new jsAuto("autocomplete","divautocomplete") // handle event: // autocomplete.handleEvent(value, returnObjectID) // <input id="rautocomplete" onkeyup="autocomplete.handleEvent(this.value,"ratocomplete")> // step2 : // add autocompete item: // autocomplete.item(string) // string must be a string var, you can split the string by "," // autocomplete.item("blueDestiny,never-online,csdn,blueidea") // http://www.never-online.com function jsAuto(instaceName,objID) { this._msg = []; this._o = document.getElementById( objID ); if (!this._o) return; this._f = null; this._i = instaceName; this._r = null; this._v = null; this._o.style.visibility = "hidden"; this._o.style.lineHeight = "120%"; this._o.style.position = "absolute"; this._o.style.zIndex = "9999"; return this; }; // mouseEvent. jsAuto.prototype.domouseover=function(obj) { obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover"; }; jsAuto.prototype.domouseout=function(obj) { obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout"; }; jsAuto.prototype.doclick=function(msg) { with (this) { if(_r) { _r.value = msg; _o.style.visibility = "hidden"; } else { alert("javascript autocomplete ERROR :\n\n can not get return object."); return; } }}; // object method; jsAuto.prototype.item=function(msg) { if( msg.indexOf(",")>0 ) { var arrMsg=msg.split(","); for(var i=0; i<arrMsg.length; i++) { arrMsg[i] ? this._msg.push(arrMsg[i]) : ""; } } else { this._msg.push(msg); } this._msg.sort(); }; jsAuto.prototype.append=function(msg) { with (this) { _i ? "" : _i = eval(_i); var div = document.createElement("DIV"); //bind event to object. div.onmouseover = function(){_i.domouseover(this)}; div.onmouseout = function(){_i.domouseout(this)}; div.onclick = function(){_i.doclick(msg)}; var re = new RegExp("(" + _v + ")","i"); div.className = "mouseout"; if (_v) div.innerHTML = msg.replace(re , "<strong>$1</strong>"); div.style.fontFamily = "verdana"; _o.appendChild(div); }}; jsAuto.prototype.display=function() { with(this) { if(_f) { _o.style.left = _r.offsetLeft; _o.style.width = _r.offsetWidth; _o.style.top = _r.offsetTop + _r.offsetHeight; _o.style.visibility = "visible"; } else { _o.style.visibility="hidden"; } }}; jsAuto.prototype.handleEvent=function(fValue,fID) { with (this) { var re; _f = false; _r = document.getElementById( fID ); _v = fValue; _i = eval(_i); re = new RegExp("^" + fValue + "", "i"); if( fValue=="" ) return; _o.innerHTML=""; for(var i=0; i<_msg.length; i++) { if(re.test(_msg[i])) { _i.append(_msg[i]); _f = true; } } _i ? _i.display() : alert("can not get instance"); }}; window.onerror=new Function("return true;"); //--> </SCRIPT> </HEAD> <BODY> <div id="divc"> <!--this is the autocomplete container.--> </div> <h1>Autocomplete Function</h1> <div align="center"> <input onkeyup="jsAutoInstance.handleEvent(this.value,'auto')" id="auto"> </div> <div id="divf"> Power By Miracle, never-online </div> <SCRIPT LANGUAGE="JavaScript"> <!-- var jsAutoInstance = new jsAuto("jsAutoInstance","divc"); jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start"); jsAutoInstance.item("blueDestiny"); jsAutoInstance.item("BlueMiracle,Blue"); jsAutoInstance.item("angela,geniuslau"); jsAutoInstance.item("never-online"); //--> </SCRIPT> </BODY> </HTML> <script language="Javascript"> var now = new Date(); document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> </noscript>
运行代码
复制代码
另存代码
本文相关文章阅读
欢迎投稿
推荐:
网页陶吧
|
网页制作速查手册
阅读关于
JS
IE
自动完成
Firefox
网页陶吧
龙犊
的全部文章
原文出处
相关文章
·
推荐:了解一下ie7 下hack的方法
·
用户体验:JS实现仿新浪信息提示效果
·
JS实现的滑动展开与折叠效果
·
JS获取网页中HTML元素的几种方法分析
·
IE不解释VBSCRIPT的原因和解决办法
·
用ASP动态生成JS的表单验证代码
·
近期特效推荐:使用JS和CSS打造网页特效
·
网页最简短的拖动对象代码实例演示
·
灵活调用xsl来解析xml文档(js异步)
·
CSS样式表:详细介绍IE7新支持的选择器
·
服务器端可控情形JS跨域访问解决方法
·
图文并茂教你如何创建个人门户模块
·
中文域名全面进入全球主流市场
·
百度人为操纵搜索结果遭曝光
·
谷歌、百度搜索巨头对决网络视频
·
wordpress最佳SEO 插件分享
·
网站推广:论坛宣传方法细化
·
如何通过论坛来推广自己的网站
·
网站推广之半年打造10万IP的流量
·
基于XHTML标准DIV+CSS布局对SEO的影响
·
工具条能帮助网页被Google收录吗?
·
经验分享:写在中国站长站建站四周年
最新文章
·
当老板不轻松?爱国者“关爱王”帮您忙
·
长城航天首款安全笔记本A62铸造精英风范
·
长城安全游戏笔记本让网游“天下无贼”
·
CES2009:爱国者引领全球移动存储第三次提速
·
长城电脑整机业务重新布阵 腾飞2009年!
·
IT分众握手新闻门户北青网 共推数码频道
编辑推荐
·
超频无极限 盈通G9800GTX+游戏高手装备利器
·
09年开年中关村e世界再获殊荣
·
升VIP服务 苹果MB466e世界仅售9540
·
鼠标也时髦 苏格兰风情款亮相e世界
·
中关村e世界老朋友大搜索
·
海量存储 致铭G31监控板领航行业新标准
·
让假货无处可躲!LG光磁防伪大揭密
·
笔记本市场再现消费热潮 航天概念受追捧
·
民族品牌长城PC产业崛起的 “双驾马车”
·
AMD发布Dragon平台 900美元提供巅峰性能
科技万花筒
文章排行