自动提示的文本框

最新推荐文章于 2018-09-16 20:30:56 发布

wwttqq85538649

最新推荐文章于 2018-09-16 20:30:56 发布

阅读量385

点赞数 1

分类专栏： css JavaScript 文章标签： colors function stylesheet javascript border xhtml

本文链接：https://blog.csdn.net/wwttqq85538649/article/details/5560310

版权

JavaScript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

css

24 篇文章 0 订阅

订阅专栏

1，自动提示的文本框终于完成了。

先上图吧

主要的几个步骤是：

1：建立框架结构

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="award.css" mce_href="award.css" type="text/css" rel="stylesheet" /> <mce:script type="text/javascript" src="award.js" mce_src="award.js"></mce:script> </head> <body> <form method="post" name="myForm1"> <label for="colors">Color:</label> <input type="text" name="colors" id="colors" οnkeyup="findColors();" /> </form> <div id="popup"> <ul id="colors_ul"></ul> </div> </body> </html>

设置css样式：

@charset "utf-8"; /* CSS Document */ { padding:0px; margin:0px; border:none; } body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:0px; margin:5px; } form{ padding:0px; margin:0px; } input{ border:1px solid #000; width:200px; padding:1px; margin:0px; } #popup{ /*提示框div块的样式*/ position:absolute; width:202px; color:#004a7e; font-size:px; font-family:Arial, Helvetica, sans-serif; left:41px; top:25px; } #popup.show{ /*显示提示框的边框*/ border:1px solid #004a7e; } #popup.hide{ /*隐藏提示框的边框*/ border:none; } ul{ list-style:none; margin:0px; padding:0px; } li.mouseOver{ background-color:#004a73; color:#ffffff; } li.mouseOut{ background-color:#ffffff; color:#004a7e; }

实现匹配用户输入

// JavaScript Document var oInputField; //考虑到很多函数都要用到 var oPopDiv; //因此采用全局变量的形式 var oColorsUl; var aColors=["red","green","blue","yellow","chocolate","black"]; aColors.sort(); //按字母排序，使显示效果更友好 function initVars() { oInputField = document.forms["myForm1"].colors; oPopDiv = document.getElementById("popup"); oColorsUl = document.getElementById("colors_ul"); } function findColors() { initVars(); if ( oInputField.value.length > 0) { var aResult = new Array(); for (var i = 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键） } //end of if } function clearColors() { //清除提示内容 for(var i=oColorsUl.childNodes.length-1; i >= 0; i-- ) { oColorsUl.removeChild(oColorsUl.childNodes[i]); } oPopDiv.className = "hide"; } function setColors(theColors) { //显示提示框，传入得参数即为匹配出来的结果组成的数组 clearColors(); //没输入一个字母就先清除原先的提示，再继续 oPopDiv.className = "show"; var oLi; for (i =0; i<theColors.length; i++) { oLi = document.createElement("li"); oColorsUl.appendChild(oLi); oLi.appendChild(document.createTextNode(theColors[i])); oLi.onmouseover = function() { this.className = "mouseOver"; //鼠标指针经过时高亮 } oLi.onmouseout = function() { this.className = "mouseOut"; } oLi.onclick = function() { //用户单击某个匹配时，设置输入框为该项的值 oInputField.value = this.firstChild.nodeValue; clearColors(); //同时清除提示框 } } }

我采用的方式是将css+JavaScript的与html分开来。详细代码见如上。

我的心得：做事情要认真，一点儿也不能马虎。可能因为一点儿的马虎，导致你浪费太多的时间了。

以上的心得主要体现在js文件中的clearColors（）函数中的removechild写成remove，这是不认真的体现。所以要吸取教训。好好总结经验。