脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS输入框邮箱自动提示(带有demo和源码)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。   今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件，即说都找遍了gIThub上源码 都没有看到这样类似的插件，然后我想了下 "JS输入框邮箱自动提示" 和我前几次写的编写简易的JS输入框模糊查询 插件 功能类似了！也GOOGLE了下 到底是个什么样的效果，看了下也没有什么特别之处，所以趁着今天没有什么事情做的话 写一个这样的出来 给大家分享下 也可以自己积累下，以后如果项目中碰到类似的效果可以直接拿来用。

 

   说了这么多！我们先来看看效果 看看到底是个什么样的，其实有时候我看别人的博客或者代码时候 也是希望先看看什么效果 然后看看他们的代码能不能运行，然后顺着这个思路去研究他们内部代码，所以我底部提供了  "demo下载链接" 大家有空的话 也可以研究下我写的代码 如有不足之处 请大家多多指教！好了 先瞎聊到这里！先看看下面效果！如下图：

 

 

原理是：一个输入框 当我输入任何字的时候 自动下拉相应的邮箱提示，在输入框输入11的时候 下拉框有所有11的邮箱 输入其他的时候 有其他文案对应的邮箱。

 

同理 此插件不需要任何htML标签，只需要一个输入框 有相对应的class类名就ok 且父级有个class类名，其他的都不需要。内部的HTML代码都是自动生成的。

 

HTML代码如下：

 

<p class="parentCls">

    <input tyPE="text" class="inputElem">

 </p>

其实上面的p标签都可以不需要 只需要在input输入框 且父级元素添加一个如上class(自定义也可以，只是在JS初始化的时候要传入class就ok 我默认情况下 父级class叫parentCls,当前输入框class叫inputElem,隐藏域的class叫hiddenCls，在初始化的时候 直接初始化 传入空对象即可！)。因为页面上可能有多个输入框 所以需要一个父级class 来区分是那个输入框，当然要个隐藏域 存值给开发后台。

 

其中在配置项里面 有个邮箱数组参数 mailArr        : ["@QQ.COM","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"] 。就是要告诉我们默认邮箱有这么多，不管我输入什么 下拉框初始化时候有这么多邮箱提示，当我精确到某一项的时候 在给个提示 精确到某一项下拉。当然由于需求的变更 邮箱这个参数可以自己初始化时候 自己根据需求配置。

 

代码风格还是和以前一样。

 

实现的功能如下：

 

1. 支持键盘上下移键盘操作，支持鼠标点击及按回车操作。

 

2. 点击document时候 除当前input输入框之外 下拉框隐藏。当接着输入时候 实现自动匹配等等操作。

 

具体不多说 就是类似于网上注册时候 邮箱自动提示功能一样 ，如果有任何bug的话 可以给我留言，时间也不早了 不罗嗦了！直接贴代码：

 

CSS代码如下：

 

复制代码

<style>

   *{margin:0;padding:0;}

   ul,li{list-style:none;}

   .inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ff4455;}

   .parentCls{width:200px;}

   .auto-tip li{width:100%;height:22px;line-height:22px;font-Size:14px;}

   .auto-tip li.hoverBg{background:#ddd;cursor:pointer;}

   .red{color:red;}

   .hidden {display:none;}

  </style>

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JS输入框邮箱自动提示(带有demo和源码)全部内容，希望文章能够帮你解决javascript代码实例教程-JS输入框邮箱自动提示(带有demo和源码)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。