前端开发

 首页 > 前端开发 > javascript > javascript实现匹配时换色的输入提示特效代码

javascript实现匹配时换色的输入提示特效代码

分享到:
【字体:
导读:
          本教程讲解javascript实现匹配时换色的输入提示特效代码 这是一款js输入提示特效,当你在输入框中输入字母时,如果下边列出的类别中有与你字母相匹配的,那么这些内容将会变成红色...

本教程讲解javascript实现匹配时换色的输入提示特效代码

这是一款js输入提示特效,当你在输入框中输入字母时,如果下边列出的类别中有与你字母相匹配的,那么这些内容将会变成红色,着重显示出来,与输入框下拉提示是基本是一样的,只是换了一个方式。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-tips-cha-color-codes/

具体代码如下:




一种输入提示特效,匹配时换色

html, body { margin:20px; padding:0; }
body { color:#454444; padding: 0; font:12px/30px "宋体"; font-family:Tahoma;}
a { color:#454444; text-decoration:none; }
a:visited { color:#454444; }
a:hover, a:active, a:focus { color:#ff6842; text-decoration:underline; }
.fenlei {margin-bottom:30px; width:100%; float:left;}
.fenlei li { float:left; width:20%;}
.fenlei span,.fenlei span a,.fenlei span a:link,.fenlei span a:active,.fenlei span a:visited { color:#f35d61;}
.red{color:red;}





 
 


 
     
  • Adidas阿迪达斯
  •  
  • AFU阿芙
  •  
  • Anna Sui安娜苏
  •  
  • AFU阿芙
  •  
  • Anna Sui安娜苏
  •  
 
     
  • barbie芭比
  •  
  • Balo贝罗
  •  
  • barbie芭比
  •  
  • barbie芭比
  •  
  • Balo贝罗
  •  
分享到:
javascript中try catch用法详解
本教程讲解javascript中try catch用法详解 先看个实例 window.onload=function(){ var oBtn=document.getElementById("b1"); function mto(){ alert("123"); }; try //非IE { oBtn.attachEvent("onclick",mto,false); } catch(e)//IE { oBtn.addEventListener("click",mto,false); } }; 注意的是...
javascript限制文本框的输入内容代码详解
为大家分享的JavaScript限制文本框的输入内容代码如下               亲,试试效果吧! 请输入数字或字母:   请输入数字,只能输入数字哦:   请输入汉字,只能输入汉字哦:   运行效果图: 下面再给大家补充一些: 小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……