js实现的邮箱自动补全

最新推荐文章于 2026-05-16 05:39:26 发布

原创

最新推荐文章于 2026-05-16 05:39:26 发布 · 9.3k 阅读

收录于

当前文章被以下社区和专栏收录：

这篇博客介绍了如何在前端实现邮箱自动补全功能。关键点包括用户自定义输入和@后自动补全邮箱后缀，以及通过点击匹配项填充邮箱。作者分享了HTML5代码段以及附带的JavaScript实现，最终成功完成了邮箱自动补全的功能。

今天练习了一个邮箱自动补全的内容，在前端输入邮箱的时候系统可以自动补全，这个技能点比较简单，现在写一下我自己的做法：
这里需要注意两个点：
１、前面用户自己输入，后面@之后的内容自动补全
２、当用户输入@时，可以自动为用户匹配相应的邮箱后缀
３、用户可以通过点击已匹配好的邮箱输入到框中

这里写图片描述

ＨＴＭＬ５代码（页面部分）：

<input id="regemail" class="int-type w-thir" type="text" autocomplete="off" tips="邮箱地址" name="email" rule="" style="ime-mode: disabled;">
<div id="maillist" style="display: none;">
  <h3>请选择邮箱类型</h3>
  <ul>
    <li class="on"></li>
    <li>@qq.com</li>
    <li>@163.com</li>
    <li>@126.com</li>
    <li>@sina.com</