首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现邮箱后缀提示功能的示例代码

Posted in Javascript onDecember 13, 2018

先来个基础的

需求

  • 根据下面需求实现如示意图所示的邮箱输入提示功能，注意，根据要求只需实现下面功能
  • 当用户没有任何输入时，提示框消失
  • 当用户输入字符后，显示提示框，并且把用户输入的内容自动拼上邮箱后缀进行显示
  • 暂时不用考虑示意图中的红色和蓝色背景色的逻辑
  • 注意用户输入中前后空格需要去除

小优化编码

需求

如果我们输入的是 abc@1，这个时候出现的提示框内容是

  • abc@1@163.com
  • abc@1@gmail.com
  • abc@1@126.com
  • ……

很明显，上面的提示框不是一个符合用户需求的提示，我们需要做一些优化：

当用户输入含有 @ 符号时，我们选取用户输入的@前面的字符来和后缀拼接

需求

这下出现的提示好多了，不过用户如果已经输入了@1，说明他大概率要输入163或者126，我们需要让我们的提示更加符合用户的期望。满足以下需求：

当用户输入了 @ 及部分后缀时，只从 postfixList 选取符合用户输入预期的后缀，我们以前缀匹配为要求。

当用户输入不满足任何前缀匹配时，则显示全部提示

测试用例

  • 输入a@1->出现提示框，提示a@163.com, a@126.com
  • 输入a@g->出现提示框，提示a@gmail.com
  • 输入a@2->出现提示框，提示a@263.net
  • 输入a@qq->出现提示框，提示a@qq.com
  • 输入a@163.->出现提示框，提示a@163.com
  • 输入a@126.com->出现提示框，提示a@126.com
  • 输入a@qq.com （两个空格）->出现提示框，提示a@qq.com
  • 输入a@qq.comm->出现提示框，出现全部提示 代码1
<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <title>邮箱后缀提示1-完成基本提示</title>
 
</head>

<body>
 <div class="wrapper">
  <input type="text" id="input-email">
  <ul class="email-sug" id="email-sug-wrapper">

  </ul>
 </div>
 <script>
  var postfixList = ["163.com", "gmail.com", "126.com", "qq.com", "263.net"];
  var txt = document.getElementById("input-email");
  var sug = document.getElementById("email-sug-wrapper");
  
  // keys.addEventListener("keyup",function(){
  //  console.log("event handle1");
  // })
  // keys.addEventListener("keypress",function(){
  //  console.log("event handle2");
  // })
  // keys.addEventListener("keydown",function(){
  //  console.log("event handle3");
  // })
  // keys.addEventListener("input",function(){
  //  console.log("event handle4");
  // })

  //经过查看各个效果，oninput效果最符合需求。
  txt.oninput = function () {
   console.log("event handle4");
   judge();
   add();

  }
  function getText() {
   var inputText = txt.value.trim();
   return inputText;
  }
  //判断是否生成新的数组
  function postlist() {
   var userinput = getText();
   var newpostlist = new Array();
   if (userinput.search('@') != 0) {
    var len = userinput.search('@');
    //用来拼接的用户输入内容 = 只使用@之后的字符串
    var x = userinput.substring(len + 1, userinput.length); //取@之后的部分
    for (var i = 0; i < postfixList.length; i++) {
     if (postfixList[i].search(x) == 0) {
      newpostlist.push(postfixList[i]);
     }
    }
    //若@后面没有字符或者新数组newpostlist为空，就返回原来的postfixlist
    if (x === '' || newpostlist == '') {
     return postfixList;
    }
    return newpostlist;
   } else {
    return postfixList;
   }
  }
  //根据输入内容和匹配来生成提示数组
  function promptContent() {
   var x = getText();
   var tips = new Array();
   if (x.indexOf("@") != -1) {
    var p = x.slice(0, x.indexOf("@"));
    for (i = 0; i < postlist().length; i++) {
     tips[i] = p + "@" + postlist()[i];
    }
   } else {
    for (i = 0; i < postfixList.length; i++) {
     tips[i] = x + "@" + postfixList[i];
    }
   }
   return tips;
  }
  //添加提示数组进入li
  function add() {
   var sug = document.getElementById("email-sug-wrapper");
   var tips = promptContent();
   while (sug.hasChildNodes()) {
    sug.removeChild(sug.firstChild);
   }
   //将之前的列表清除掉，然后重新生成新的列表
   for (i = 0; i < tips.length; i++) {
    var tip_li = document.createElement("li");
    tip_li.innerHTML = tips[i];
    sug.appendChild(tip_li);
   }
  }

  function judge() {
   //判空，是“”没有内容，不能为“　”
   if (getText() == "") {
    hide();
   } else {
    display();
   }

  }

  function hide() {
   sug.style.display = "none";
  }

  function display() {
   sug.style.display = "block";
  }
 </script>
</body>

</html>

新的需求编码

需求

上面我们只完成了提示，但提示还没有直接作用到选择中，我们现在完成以下需求：

  • 使用CSS实现：鼠标滑过提示框的某一个提示时，这个提示内容背景色变化，表示鼠标经过了这个DOM节点
  • 鼠标如果点击某个提示，则提示内容进入输入框，同时提示框消失
  • 在上个步骤结束后，在输入框中任意再输入字符或删除字符，则重新开始出现提示框

需求

尝试在输入框中输入<b>，看看提示框发生了什么

阅读

设计

我们需要在两个地方进行处理，一个是在生成提示内容那里，对于特殊字符进行转义编码，另一个是在把鼠标点击的提示框内容转回输入框时进行解码。

代码2

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <title>邮箱后缀提示2-添加样式和监听鼠标点击和转码内容</title>
 <style>
 #input-email{
  width: 300px;
  height: 30px;
 }
 .email-sug{
  width: 300px;
  list-style: none;
  padding: 0px;
  margin: 0px;
  border: 2px solid rgba(134, 132, 132,0.3);
  border-top:none;
  display: none;
  /* 初始不显示，避免边框出现 */
 }
 .email-sug li{
  width: 300px;
  height: 30px;
  background-color: #ffffff;
  color: darkgrey;
  line-height: 30px; 
 }
 .email-sug li:hover{
  background-color:pink;
 }
 </style>
</head>

<body>
 <div class="wrapper">
  <input type="text" id="input-email">
  <ul class="email-sug" id="email-sug-wrapper">

  </ul>
 </div>
 <script>
  var postfixList = ["163.com", "gmail.com", "126.com", "qq.com", "263.net"];
  var txt = document.getElementById("input-email");
  var sug = document.getElementById("email-sug-wrapper");
  sug.addEventListener("click",function(ev){
   //采用事件代理，监听父级点击事件，通过target获取当前li
   var ev=ev||window.event;
   var target=ev.target||ev.srcElement;
   if(target.nodeName.toLowerCase()=="li"){
    hide();
    return txt.value=htmlDecode( target.innerHTML); //解码
    //return txt.value= target.innerHTML;    
   }
   
  })
  txt.oninput = function () {
   console.log("event handle4");
   judge();
   add();

  }

  function getText() {
   var inputText = txt.value.trim();
   return inputText;
  }
  //判断是否生成新的数组
  function postlist() {
   var userinput = getText();
   var newpostlist = new Array();
   if (userinput.search('@') != 0) {
    var len = userinput.search('@');
    //用来拼接的用户输入内容 = 只使用@之后的字符串
    var x = userinput.substring(len + 1, userinput.length); //取@之后的部分
    for (var i = 0; i < postfixList.length; i++) {
     if (postfixList[i].search(x) == 0) {
      newpostlist.push(postfixList[i]);
     }
    }
    //若@后面没有字符或者新数组newpostlist为空，就返回原来的postfixlist
    if (x === '' || newpostlist == '') {
     return postfixList;
    }
    return newpostlist;
   } else {
    return postfixList;
   }
  }
  //根据输入内容和匹配来生成提示数组
  function promptContent() {
   var x = htmlEncode(getText()) //转码;
   // var x=getText();
   var tips = new Array();
   if (x.indexOf("@") != -1) {
    var p = x.slice(0, x.indexOf("@"));
    for (i = 0; i < postlist().length; i++) {
     tips[i] = p + "@" + postlist()[i];
    }
   } else {
    for (i = 0; i < postfixList.length; i++) {
     tips[i] = x + "@" + postfixList[i];
    }
   }
   return tips;
  }
  //添加提示数组进入li
  function add() {
   var sug = document.getElementById("email-sug-wrapper");
   var tips = promptContent();
   while (sug.hasChildNodes()) {
    sug.removeChild(sug.firstChild);
   }
   //将之前的列表清除掉，然后重新生成新的列表
   for (i = 0; i < tips.length; i++) {
    var tip_li = document.createElement("li");
    tip_li.innerHTML = tips[i];
    sug.appendChild(tip_li);
   }
  }

  function judge() {
   //判空，是“”没有内容，不能为“　”
   if (getText() == "") {
    hide();
   } else {
    display();
   }

  }

  function hide() {
   sug.style.display = "none";
  }

  function display() {
   sug.style.display = "block";
  }

  /*1.用浏览器内部转换器实现html转码*/
  function htmlEncode(html){
   //1.首先动态创建一个容器标签元素，如DIV
   var temp = document.createElement ("div");
   //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
   (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
   //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
   var output = temp.innerHTML;
   temp = null;
   return output;
  }
  /*2.用浏览器内部转换器实现html解码*/
  function htmlDecode(text){
   //1.首先动态创建一个容器标签元素，如DIV
   var temp = document.createElement("div");
   //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
   temp.innerHTML = text;
   //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
   var output = temp.innerText || temp.textContent;
   temp = null;
   return output;
  }
 </script>
</body>

</html>

加上键盘

需求

我们给提示框加上3个按键的功能，分别是回车和上下键，使得可以通过键盘操作进行提示框的选择

  • 当有提示框的时候，默认第一个提示为被选择状态，用一个和鼠标滑过不一样的背景色来标识
  • 当有输入框的时候，按上键，可以向上移动选择状态，如果按键之前的被选择提示是第一个，则被选状态移到最下面一个
  • 当有输入框的时候，按下键，可以向下移动选择状态，如果按键之前的被选择提示是最后一个，则被选状态移到第一个
  • 当有输入框时，按回车键，则将当前被选中状态的提示内容，放到输入框中，并隐藏提示框
  • 当没有输入框的时候，这3个键盘按键无响应
  • 当用户输入发生改变的时候，选择状态都重新切回到第一个提示

优化体验

需求

当我们进入页面，或者当我们点击鼠标进行提示选择后，输入框的焦点就不在了，所以请你优化一下用户体验：

一进入页面就将焦点放在输入框中

用户点击鼠标，进行提示选择后，焦点依然在输入框中

用户按ESC键的时候，对用户输入进行全选

 代码3

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <title>邮箱后缀提示3-添加键盘响应及输入框焦点优化</title>
 <style>
  #input-email{
  width: 300px;
  height: 30px;
 }
 .email-sug{
  width: 300px;
  list-style: none;
  padding: 0px;
  margin: 0px;
  border: 2px solid rgba(134, 132, 132,0.3);
  border-top:none;
  display: none;
  /* 初始不显示，避免边框出现 */
 }
 .email-sug li{
  width: 300px;
  height: 30px;
  background-color: #ffffff;
  color: darkgrey;
  line-height: 30px; 
  overflow: hidden;
  padding-left: 10px;
  box-sizing: border-box;
 }
 .email-sug li:hover{
  background-color:skyblue;
 }
 .email-sug li.active{
  background-color:pink;
 }
 </style>
</head>

<body>
 <div class="wrapper">
  <input type="text" id="input-email" autofocus="autofocus">
  <ul class="email-sug" id="email-sug-wrapper">

  </ul>
 </div>
 <script>
  var postfixList = ["163.com", "gmail.com", "126.com", "qq.com", "263.net"];
  var txt = document.getElementById("input-email");
  var sug = document.getElementById("email-sug-wrapper");
  var nowSelectTipIndex = 0;

  //获取输入文本
  txt.oninput = function (e) {
   console.log("event handle4");
   //按下的是内容，则重置选中状态，坐标清零，避免光标位置已经计算存入。
   if (!(e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 13)) {
    nowSelectTipIndex = 0;
   }
   judge();
   add();
  }
  //点击事件响应
  sug.addEventListener("click", function (ev) {
   //采用事件代理，监听父级点击事件，通过target获取当前li
   var ev = ev || window.event;
   var target = ev.target || ev.srcElement;
   if (target.nodeName.toLowerCase() == "li") {
    hide();
    txt.focus(); //写在return之前，不然无效
    return txt.value = htmlDecode(target.innerHTML); //解码
    //return txt.value= target.innerHTML;  
   }
  })
  //键盘事件响应
  document.addEventListener("keydown", function (e) {
   var e = e || window.event;
   var key = e.which || e.keyCode;
   var list = document.getElementsByTagName("li");
   //向下键
   if (key == 40) {
    for (i = 0; i < list.length; i++) {
     list[i].setAttribute("class", "");
    }
    nowSelectTipIndex++;
    if (nowSelectTipIndex + 1 > list.length) {
     nowSelectTipIndex = 0;
    }
    list[nowSelectTipIndex].setAttribute("class", "active");
   }
   //向上键
   if (key == 38) {
    for (i = 0; i < list.length; i++) {
     list[i].setAttribute("class", "");
    }
    nowSelectTipIndex--;
    if (nowSelectTipIndex < 0) {
     nowSelectTipIndex = list.length - 1;
    }
    list[nowSelectTipIndex].setAttribute("class", "active");
   }
   //回车键
   if (key == 13) {
    var x = document.getElementsByClassName("active");
    txt.value = htmlDecode(x[0].innerHTML); //用textcontent会去除html标签例如<b>。。
    hide();
   }
   if (key == 27) {
    txt.setSelectionRange(0, -1); //ESC全选上文本框内容
    hide();
   }

  })
  //获取输入内容，并去除首尾空格
  function getText() {
   var inputText = txt.value.trim();
   return inputText;
  }
  //判断是否生成新的数组
  function postlist() {
   var userinput = getText();
   var newpostlist = new Array();
   if (userinput.search('@') != 0) {
    var len = userinput.search('@');
    //用来拼接的用户输入内容 = 只使用@之后的字符串
    var x = userinput.substring(len + 1, userinput.length); //取@之后的部分
    for (var i = 0; i < postfixList.length; i++) {
     if (postfixList[i].search(x) == 0) {
      newpostlist.push(postfixList[i]);
     }
    }
    //若@后面没有字符或者新数组newpostlist为空，就返回原来的postfixlist
    if (x === '' || newpostlist == '') {
     return postfixList;
    }
    return newpostlist;
   } else {
    return postfixList;
   }
  }
  //根据输入内容和匹配来生成提示数组
  function promptContent() {
   var x = htmlEncode(getText()); //转码;
   // var x=getText();
   var tips = new Array();
   if (x.indexOf("@") != -1) {
    var p = x.slice(0, x.indexOf("@"));
    for (i = 0; i < postlist().length; i++) {
     tips[i] = p + "@" + postlist()[i];
    }
   } else {
    for (i = 0; i < postfixList.length; i++) {
     tips[i] = x + "@" + postfixList[i];
    }
   }
   return tips;
  }
  //添加提示数组进入li
  function add() {
   var sug = document.getElementById("email-sug-wrapper");
   var tips = promptContent();
   while (sug.hasChildNodes()) {
    sug.removeChild(sug.firstChild);
   }
   //将之前的列表清除掉，然后重新生成新的列表
   for (i = 0; i < tips.length; i++) {
    var tip_li = document.createElement("li");
    tip_li.innerHTML = tips[i];
    sug.appendChild(tip_li);
   }
   //初始选择第一项为选中状态，加类名变粉色（需要生成li之后再调用）。
   var list = document.getElementsByTagName("li");
   list[0].setAttribute("class", "active");
  }

  function judge() {
   //判空，是“”没有内容，不能为“　”
   if (getText() == "") {
    hide();
   } else {
    display();
   }

  }
  //控制提示列表隐藏
  function hide() {
   sug.style.display = "none";
  }
  //控制提示列表显示 
  function display() {
   sug.style.display = "block";
  }

  /*1.用浏览器内部转换器实现html转码*/
  function htmlEncode(html) {
   //1.首先动态创建一个容器标签元素，如DIV
   var temp = document.createElement("div");
   //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
   (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
   //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
   var output = temp.innerHTML;
   temp = null;
   return output;
  }
  /*2.用浏览器内部转换器实现html解码*/
  function htmlDecode(text) {
   //1.首先动态创建一个容器标签元素，如DIV
   var temp = document.createElement("div");
   //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
   temp.innerHTML = text;
   //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
   var output = temp.innerText || temp.textContent;
   temp = null;
   return output;
  }
 </script>
</body>

</html>

最终效果如图：

JavaScript实现邮箱后缀提示功能的示例代码

JavaScript实现邮箱后缀提示功能的示例代码

JavaScript实现邮箱后缀提示功能的示例代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JavaScript实现邮箱后缀提示功能的示例代码

- Author -

JoeJoan

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
javascript中数组方法汇总
Jul 07 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
js使用formData实现批量上传
Mar 27 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 #Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 #Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 #Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 #Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 #Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 #Javascript
js实现黑白div块画空心的图形
Dec 13 #Javascript
表扬信(62) 道歉信(39) 辞职信(98) 介绍信(57) 感言(394) 广播稿(323) 教学反思(909) 邀请函(127) 事迹材料(636) 检讨书(456)
You might like
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
js 颜色选择器（兼容firefox）
2009/03/05 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
美国皮靴公司自1863年：The Frye Company
2016/11/30 全球购物
阿迪达斯荷兰官方网站：adidas荷兰
2018/03/16 全球购物
Foot Locker加拿大官网：美国知名运动产品零售商
2019/07/21 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
什么样的创业计划书可行性高？
2014/02/01 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
基督教婚礼主持词
2014/03/14 职场文书
自主招生推荐信范文
2014/05/10 职场文书
团日活动总结模板
2014/06/25 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
质量保证书格式模板
2015/02/27 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
送给自己的励志语句：要安静的优秀，悄无声息的坚强
2019/11/26 职场文书
redis数据一致性的实现示例
2022/03/18 Redis
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL