提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

简单JS自动提示文本框代码

JS自动代码 简单 提示 文本框
2023-06-13 09:14:32 时间
本例以颜色为例，为用户提供自动提示，展示效果和运行结果如图：

1、建立框架结构：
复制代码代码如下:

<body>
<formmethod="post"name="myForm1">
Color:<inputtype="text"name="colors"id="colors"onkeyup="findColors();"/>
</form>
<divid="popup">
<ulid="colors_ul"></ul>
</div>
</body>

2、页面和表单CSS：
复制代码代码如下:

<style>
<!--
body{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;padding:0px;margin:5px;form{padding:0px;margin:0px;}
input{font-family:Arial,Helvetica,sans-serif;
font-size:12px;border:1pxsolid#000000;
width:200px;padding:1px;margin:0px;#popup{position:absolute;width:202px;
color:#004a7e;font-size:12px;
font-family:Arial,Helvetica,sans-serif;
left:41px;top:25px;#popup.show{border:1pxsolid#004a7e;#popup.hide{border:none;
}ul{
list-style:none;
margin:0px;padding:0px;li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;li.mouseOut{
background-color:#FFFFFF;
color:#004a7e;-->
</style>

3、实现JS匹配用户输入：
复制代码代码如下:
<scriptlanguage="javascript">
varoInputField;//考虑到很多函数中都要使用
varoPopDiv;//因此采用全局变量的形式
varoColorsUl;
varaColors=["red","green","blue","magenta","yellow",……"ivory","darkmagenta","cornfloewrblue"];
aColors.sort();//按字母排序，使显示结果更友好
functioninitVars(){oInputField=document.forms["myForm1"].colors;
oPopDiv=document.getElementByIdx_x("popup");
oColorsUl=document.getElementByIdx_x("colors_ul");functionclearColors(){for(vari=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className="hide";functionsetColors(the_colors){clearColors();//每输入一个字母就先清除原先的提示，再继续
oPopDiv.className="show";
varoLi;
for(vari=0;i<the_colors.length;i++){oLi=document.createElement_x("li");
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.=function(){
this.className="mouseOver";//鼠标经过时高亮oLi.=function(){
this.className="mouseOut";//离开时恢复原样oLi.onclick=function(){oInputField.value=this.firstChild.nodeValue;
clearColors();//同时清除提示框}functionfindColors(){
initVars();//初始化变量
if(oInputField.value.length>0){
varaResult=newArray();//用于存放匹配结果
for(vari=0;i<aColors.length;i++)//从颜色表中找匹配的颜色if(aColors[i].indexOf(oInputField.value)==0)
aResult.push(aColors[i]);//压入结果
if(aResult.length>0)//如果有匹配的颜色则显示出来
setColors(aResult);
else//否则清除，用户多输入一个字母
clearColors();//就有可能从有匹配到无，到无的时候需要清除else
clearColors();//无输入时清除提示框（例如用户按del键）
</script>

文本框输入提示/自动完成的Js代码
文本框输入自动匹配或提示的功能，输入内容，自动匹配对应数据，可用上下键控制选项、按回车键选择，也可以直接用鼠标选择。代码：建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量。

文本框输入提示/自动完成功能 友情提示：文本框屏蔽了回车，因此回车键暂不可用。

相关文章