资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JavaScript 文本框下拉提示(自动提示)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>文本框下拉提示效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> html{overflow:-moz-scrollbars-vertical;} body{padding:0;margin:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} body,h1,p,blockquote,dl,dt,dd,ul,ol,li,input{margin:0;padding:0;} button,input,select,textarea {font:12px/1.5 tahoma,arial,simsun,sans-serif;} button,input,select,textarea{font-size:100%;} a{text-decoration:none;} a:hover{text-decoration:underline;} #wrap{width:650px;margin:0 auto;} .txt{width:210px;height:25px;border:1px solid #ccc;line-height:25px;padding:0 5px;} .autoDis{border:1px solid #999;position:absolute;overflow:hidden;} .autoDis p{line-height:25px;cursor:default;padding:0 5px;} .autoDis li{line-height:25px;cursor:default;padding:0 5px;background-color:#fff;} .autoDis .cur{background:#ccc;} </style> </head> <body> <div id="wrap"> <p>提示：可以输入"1"开头的</p> <input id="autoCom" type="text" class="txt"> <input id="autoC" type="text" class="txt"> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A(autoComplete%3D%7B%20%0D%0Apop_len%3A10%2C%20%0D%0Apop_cn%3A'autoDis'%2C%20%0D%0Ahover_cn%3A'cur'%2C%20%0D%0Asource%3A'13612345564%7C13825646464%7C13412236054%7C13012348564%7C13012345564%7C13012365564%7C%E5%BD%AD%E5%B0%8F%7C%E7%8E%8B%E8%BE%BE%7C%E6%9D%8E%E7%9B%B8%E5%85%AC%7C%E5%91%A8%E6%AC%A2%E6%AC%A2'.split('%7C')%2C%20%0D%0Ainit%3Afunction()%7B%20%0D%0Athis.setDom()%3B%20%0D%0Areturn%20this%3B%20%0D%0A%7D%2C%20%0D%0Abind%3Afunction(x)%7B%20%0D%0Aif(x.getAttribute('type')%20!%3D%20'text'%20%7C%7C%20x.nodeName%20!%3D%20'INPUT')%20%0D%0Areturn%20null%3B%20%0D%0Avar%20self%20%3D%20this%3B%20%0D%0Ax.onkeyup%20%3D%20function(e)%7B%20%0D%0Ae%20%3D%20e%20%7C%7C%20window.event%3B%20%0D%0Avar%20lis%20%3D%20self.pop.getElementsByTagName('li')%2Clens%20%3D%20self.pop.getElementsByTagName('li').length%2Cn%3Dlens%2Ctemp%3B%20%0D%0Aif(e.keyCode%20%3D%3D%2038)%7B%20%2F%2F%E9%94%AE%E7%9B%98up%E9%94%AE%E8%A2%AB%E6%8C%89%E4%B8%8B%20%0D%0Aif(self.pop.style.display%20!%3D%20'none')%7B%20%0D%0Afor(var%20i%3D0%3Bi%3Clens%3Bi%2B%2B)%7B%20%2F%2F%E9%81%8D%E5%8E%86%E7%BB%93%E6%9E%9C%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E8%A2%AB%E9%80%89%E4%B8%AD%20%0D%0Aif(lis%5Bi%5D.className)%20%0D%0Atemp%20%3D%20i%3B%20%0D%0Aelse%20%0D%0An--%3B%20%0D%0A%7D%20%0D%0Aif(n%3D%3D0)%7B%20%2F%2F%E5%A6%82%E6%9E%9C%E6%B2%A1%E6%9C%89%E8%A2%AB%E9%80%89%E4%B8%AD%E7%9A%84li%E5%85%83%E7%B4%A0%EF%BC%8C%E5%88%99%E9%80%89%E4%B8%AD%E6%9C%80%E5%90%8E%E4%B8%80%E4%B8%AA%20%0D%0Alis%5Blens-1%5D.className%20%3D%20self.hover_cn%3B%20%0D%0Athis.value%20%3D%20lis%5Blens-1%5D.innerHTML%3B%20%0D%0A%7Delse%7B%20%2F%2F%E5%A6%82%E6%9E%9C%E6%9C%89%E8%A2%AB%E9%80%89%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0%EF%BC%8C%E5%88%99%E9%80%89%E6%8B%A9%E4%B8%8A%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E5%B9%B6%E8%B5%8B%E5%80%BC%E7%BB%99input%20%0D%0Aif(lis%5Btemp%5D%20%3D%3D%20lis%5B0%5D)%7B%20%2F%2F%E5%A6%82%E6%9E%9C%E9%80%89%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0%E6%98%AF%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%AD%A9%E5%AD%90%E8%8A%82%E7%82%B9%E5%88%99%E8%B7%B3%E5%88%B0%E6%9C%80%E5%90%8E%E4%B8%80%E4%B8%AA%E9%80%89%E4%B8%AD%20%0D%0Alis%5Blens-1%5D.className%20%3D%20self.hover_cn%3B%20%0D%0Athis.value%20%3D%20lis%5Blens-1%5D.innerHTML%3B%20%0D%0Alis%5Btemp%5D.className%20%3D%20''%3B%20%0D%0A%7Delse%7B%20%0D%0Alis%5Btemp-1%5D.className%20%3D%20self.hover_cn%3B%20%0D%0Athis.value%20%3D%20lis%5Btemp-1%5D.innerHTML%3B%20%0D%0Alis%5Btemp%5D.className%20%3D%20''%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7Delse%20%2F%2F%E5%A6%82%E6%9E%9C%E5%BC%B9%E5%87%BA%E5%B1%82%E6%B2%A1%E6%9C%89%E6%98%BE%E7%A4%BA%E5%88%99%E6%89%A7%E8%A1%8C%E6%8F%92%E5%85%A5%E6%93%8D%E4%BD%9C%EF%BC%8C%E5%B9%B6%E6%98%BE%E7%A4%BA%E5%BC%B9%E5%87%BA%E5%B1%82%20%0D%0Aself.insert(this)%3B%20%0D%0A%7Delse%20if(e.keyCode%20%3D%3D%2040)%7B%20%2F%2Fdown%E9%94%AE%E8%A2%AB%E6%8C%89%E4%B8%8B%EF%BC%8C%E5%8E%9F%E7%90%86%E5%90%8Cup%E9%94%AE%20%0D%0Aif(self.pop.style.display%20!%3D%20'none')%7B%20%0D%0Afor(var%20i%3D0%3Bi%3Clens%3Bi%2B%2B)%7B%20%0D%0Aif(lis%5Bi%5D.className)%20%0D%0Atemp%20%3D%20i%3B%20%0D%0Aelse%20%0D%0An--%3B%20%0D%0A%7D%20%0D%0Aif(n%3D%3D0)%7B%20%0D%0Alis%5B0%5D.className%20%3D%20self.hover_cn%3B%20%0D%0Athis.value%20%3D%20lis%5B0%5D.innerHTML%3B%20%0D%0A%7Delse%7B%20%0D%0Aif(lis%5Btemp%5D%20%3D%3D%20lis%5Blens-1%5D)%7B%20%0D%0Alis%5B0%5D.className%20%3D%20self.hover_cn%3B%20%0D%0Athis.value%20%3D%20lis%5B0%5D.innerHTML%3B%20%0D%0Alis%5Btemp%5D.className%20%3D%20''%3B%20%0D%0A%7Delse%7B%20%0D%0Alis%5Btemp%2B1%5D.className%20%3D%20self.hover_cn%3B%20%0D%0Athis.value%20%3D%20lis%5Btemp%2B1%5D.innerHTML%3B%20%0D%0Alis%5Btemp%5D.className%20%3D%20''%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7Delse%20%0D%0Aself.insert(this)%3B%20%0D%0A%7Delse%20%2F%2F%E5%A6%82%E6%9E%9C%E6%8C%89%E4%B8%8B%E7%9A%84%E9%94%AE%E6%97%A2%E4%B8%8D%E6%98%AFup%E5%8F%88%E4%B8%8D%E6%98%AFdown%E9%82%A3%E4%B9%88%E7%9B%B4%E6%8E%A5%E5%8E%BB%E5%8C%B9%E9%85%8D%E6%95%B0%E6%8D%AE%E5%B9%B6%E6%8F%92%E5%85%A5%20%0D%0Aself.insert(this)%3B%20%0D%0A%7D%3B%20%0D%0Ax.onblur%20%3D%20function()%7B%20%2F%2F%E8%BF%99%E4%B8%AA%E5%BB%B6%E8%BF%9F%E5%A4%84%E7%90%86%E6%98%AF%E5%9B%A0%E4%B8%BA%E5%A6%82%E6%9E%9C%E5%A4%B1%E5%8E%BB%E7%84%A6%E7%82%B9%E7%9A%84%E6%97%B6%E5%80%99%E6%98%AF%E7%82%B9%E5%87%BB%E9%80%89%E4%B8%AD%E6%95%B0%E6%8D%AE%E7%9A%84%E6%97%B6%E5%80%99%E4%BC%9A%E5%8F%91%E7%8E%B0%E5%85%88%E6%97%A0%E6%B3%95%E8%A7%A6%E5%8F%91%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%20%0D%0AsetTimeout(function()%7Bself.pop.style.display%3D'none'%3B%7D%2C300)%3B%20%0D%0A%7D%3B%20%0D%0Areturn%20this%3B%20%0D%0A%7D%2C%20%0D%0AsetDom%3Afunction()%7B%20%0D%0Avar%20self%20%3D%20this%3B%20%0D%0Avar%20dom%20%3D%20document.createElement('div')%2Cframe%3Ddocument.createElement('iframe')%2Cul%3Ddocument.createElement('ul')%3B%20%0D%0Adocument.body.appendChild(dom)%3B%20%0D%0Awith(frame)%7B%20%2F%2F%E7%94%A8%E6%9D%A5%E5%9C%A8ie6%E4%B8%8B%E9%81%AE%E4%BD%8Fselect%E5%85%83%E7%B4%A0%20%0D%0AsetAttribute('frameborder'%2C'0')%3B%20%0D%0AsetAttribute('scrolling'%2C'no')%3B%20%0D%0Astyle.cssText%3D'z-index%3A-1%3Bposition%3Aabsolute%3Bleft%3A0%3Btop%3A0%3B'%20%0D%0A%7D%20%0D%0Awith(dom)%7B%20%2F%2F%E5%AF%B9%E5%BC%B9%E5%87%BA%E5%B1%82li%E5%85%83%E7%B4%A0%E7%BB%91%E5%AE%9Aonmouseover%EF%BC%8Conmouseover%20%0D%0AclassName%20%3D%20this.pop_cn%3B%20%0D%0AappendChild(frame)%3B%20%0D%0AappendChild(ul)%3B%20%0D%0Aonmouseover%20%3D%20function(e)%7B%20%2F%2F%E5%9C%A8li%E5%85%83%E7%B4%A0%E8%BF%98%E6%B2%A1%E6%9C%89%E5%8A%A0%E8%BD%BD%E7%9A%84%E6%97%B6%E5%80%99%E5%B0%B1%E7%BB%91%E5%AE%9A%E8%BF%99%E4%B8%AA%E6%96%B9%E6%B3%95%EF%BC%8C%E9%80%9A%E8%BF%87%E5%88%A4%E6%96%ADtarget%E6%98%AF%E5%90%A6%E6%98%AFli%E5%85%83%E7%B4%A0%E8%BF%9B%E8%A1%8C%E5%A4%84%E7%90%86%20%0D%0Ae%20%3D%20e%20%7C%7C%20window.event%3B%20%0D%0Avar%20target%20%3D%20e.srcElement%20%7C%7C%20e.target%3B%20%0D%0Aif(target.tagName%20%3D%3D%20'LI')%7B%20%2F%2F%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F%E5%89%8D%E5%85%88%E6%8A%8A%E6%89%80%E6%9C%89%E7%9A%84li%E6%A0%B7%E5%BC%8F%E5%8E%BB%E6%8E%89%EF%BC%8C%E8%BF%99%E9%87%8C%E7%94%A8%E7%9A%84%E6%98%AF%E4%B8%80%E7%A7%8D%E5%81%B7%E6%87%92%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%8C%E6%B2%A1%E6%9C%89%E5%8D%95%E7%8B%AC%E5%86%99removeClass%E6%96%B9%E6%B3%95%20%0D%0Afor(var%20i%3D0%2Clis%3Dself.pop.getElementsByTagName('li')%3Bi%3Clis.length%3Bi%2B%2B)%20%0D%0Alis%5Bi%5D.className%20%3D%20''%3B%20%0D%0Atarget.className%3Dself.hover_cn%3B%20%2F%2F%E4%B9%9F%E6%B2%A1%E6%9C%89%E5%86%99addClass%E6%96%B9%E6%B3%95%EF%BC%8C%E7%9B%B4%E6%8E%A5%E8%B5%8B%E5%80%BC%E4%BA%86%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0Aonmouseout%20%3D%20function(e)%7B%20%0D%0Ae%20%3D%20e%20%7C%7C%20window.event%3B%20%0D%0Avar%20target%20%3D%20e.srcElement%20%7C%7C%20e.target%3B%20%0D%0Aif(target.tagName%20%3D%3D%20'LI')%20%0D%0Atarget.className%3D''%3B%20%0D%0A%7D%3B%20%0D%0A%7D%20%0D%0Athis.pop%20%3D%20dom%3B%20%0D%0A%7D%2C%20%0D%0Ainsert%3Afunction(self)%7B%20%0D%0Avar%20bak%20%3D%20%5B%5D%2Cs%2Cli%3D%5B%5D%2Cleft%3D0%2Ctop%3D0%2Cval%3Dself.value%3B%20%0D%0Afor(var%20i%3D0%2Cleng%3Dthis.source.length%3Bi%3Cleng%3Bi%2B%2B)%7B%20%2F%2F%E5%88%A4%E6%96%ADinput%E7%9A%84%E6%95%B0%E6%8D%AE%E6%98%AF%E5%90%A6%E4%B8%8E%E6%95%B0%E6%8D%AE%E6%BA%90%E9%87%8C%E7%9A%84%E6%95%B0%E6%8D%AE%E4%B8%80%E8%87%B4%20%0D%0Aif(!!val%26%26val.length%3C%3Dthis.source%5Bi%5D.length%26%26%20this.source%5Bi%5D.substr(0%2Cval.length)%20%3D%3D%20val)%7B%20%0D%0Abak.push(this.source%5Bi%5D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aif(bak.length%20%3D%3D%200)%7B%20%2F%2F%E5%A6%82%E6%9E%9C%E6%B2%A1%E6%9C%89%E5%8C%B9%E9%85%8D%E7%9A%84%E6%95%B0%E6%8D%AE%E5%88%99%E9%9A%90%E8%97%8F%E5%BC%B9%E5%87%BA%E5%B1%82%20%0D%0Athis.pop.style.display%3D'none'%3B%20%0D%0Areturn%20false%3B%20%0D%0A%7D%2F%2F%E8%BF%99%E4%B8%AA%E5%BC%B9%E5%87%BA%E5%B1%82%E5%AE%9A%E4%BD%8D%E6%96%B9%E6%B3%95%E4%B9%8B%E5%89%8D%E4%B9%9F%E6%98%AF%E7%94%A8%E5%BE%AA%E7%8E%AFoffsetParent%EF%BC%8C%E4%BD%86%E5%8F%91%E7%8E%B0ie%E8%B7%9Fff%E4%B8%8B%E5%B7%AE%E5%88%AB%E5%BE%88%E5%A4%A7%EF%BC%88%E5%8F%AF%E8%83%BD%E6%98%AF%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F%E4%B8%8D%E5%BD%93%EF%BC%89%EF%BC%8C%E6%89%80%E4%BB%A5%E6%94%B9%E7%94%A8%E8%BF%99%E4%B8%AAgetBoundingClientRect%20%0D%0Aleft%3Dself.getBoundingClientRect().left%2Bdocument.documentElement.scrollLeft%3B%20%0D%0Atop%3Dself.getBoundingClientRect().top%2Bdocument.documentElement.scrollTop%2Bself.offsetHeight%3B%20%0D%0Awith(this.pop)%7B%20%0D%0Astyle.cssText%20%3D%20'width%3A'%2Bself.offsetWidth%2B'px%3B'%2B'position%3Aabsolute%3Bleft%3A'%2Bleft%2B'px%3Btop%3A'%2Btop%2B'px%3Bdisplay%3Anone%3B'%3B%20%0D%0AgetElementsByTagName('iframe')%5B0%5D.setAttribute('width'%2Cself.offsetWidth)%3B%20%0D%0AgetElementsByTagName('iframe')%5B0%5D.setAttribute('height'%2Cself.offsetHeight)%3B%20%0D%0Aonclick%20%3D%20function(e)%7B%20%0D%0Ae%20%3D%20e%20%7C%7C%20window.event%3B%20%0D%0Avar%20target%20%3D%20e.srcElement%20%7C%7C%20e.target%3B%20%0D%0Aif(target.tagName%20%3D%3D%20'LI')%20%0D%0Aself.value%20%3D%20target.innerHTML%3B%20%0D%0Athis.style.display%3D'none'%3B%20%0D%0A%7D%3B%20%0D%0A%7D%20%0D%0As%20%3D%20bak.length%3Ethis.pop_len%3Fthis.pop_len%3Abak.length%3B%20%0D%0Afor(var%20i%3D0%3Bi%3Cs%3Bi%2B%2B)%20%0D%0Ali.push(%20'%3Cli%3E'%20%2B%20bak%5Bi%5D%20%2B'%3C%2Fli%3E')%3B%20%0D%0Athis.pop.getElementsByTagName('ul')%5B0%5D.innerHTML%20%3D%20li.join('')%3B%20%0D%0Athis.pop.style.display%3D'block'%3B%20%0D%0A%7D%20%0D%0A%7D).init().bind(document.getElementById('autoCom')).bind(document.getElementById('autoC'))%3B%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程