在JS输入框中实现了邮件提醒的自动化。

发布时间：2023-08-19 14:30:00 所属栏目：教程来源：

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

HTML代码如下：

代码如下:

<div class="parentCls">

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

HTML代码如下：

代码如下:

<div class="parentCls">

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

</div>

其实上面的div标签都可以不需要只需要在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代码如下：

代码如下:

/**

* 邮箱自动提示插件

* @constructor EmailAutoComplete

* @ options {object} 可配置项

*/

function EmailAutoComplete(options) {

    this.config = {

        targetCls      : '.inputElem',       // 目标input元素

        parentCls      : '.parentCls',       // 当前input元素的父级类

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!