输入匹配的文本框

最新推荐文章于 2024-07-31 10:29:53 发布

原创最新推荐文章于 2024-07-31 10:29:53 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #autocomplete #javascript #div #input #border

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个基于JavaScript的自动完成文本框功能，通过监听键盘事件和鼠标事件来显示与用户输入匹配的建议列表，并允许用户通过键盘方向键进行选择。

<HTML> <HEAD> <title>带输入匹配的文本框</title> <mce:style></mce:style><style mce_bogus="1">body,div { font-family:verdana; line-height:100%; font-size:10pt; } input { width:320px; } h1 { text-align:center; font-size:2.2em; } #divc { border:1px solid #555; } .des { width:500px; background-color:lightyellow; border:1px solid #555; padding:25px; margin-top:25px; } .mouseover { color:#ffffff; background-color:highlight; width:100%; cursor:default; } .mouseout { color:#000; width:100%; background-color:#ffffff; cursor:default; }</style> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <div id="divc">  </div> <div align="center"> <input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto"> </div> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <center>请在输入框输入一个字母：</center> </BODY> </HTML>