邮箱输入提示演示-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_6945/article/details/82635609

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Email Suggest 邮箱输入提示演示</title>
</head>
<body>
<div id="title">
<h1>Email Suggest 邮箱输入提示演示</h1>
</div>
<div id="wrapper">
<div id="login_box">
<div class="clearfix"><label for="email">电子邮箱：</label><input type="text" id="email" autocomplete="off" /></div>
<ul id="email_list">
<li class="first_li">请选择邮箱类型</li>
<li></li>
<li>@163.com</li>
<li>@126.com</li>
<li>@qq.com</li>
<li>@yahoo.com.cn</li>
<li>@gmail.com</li>
<li>@sohu.com</li>
<li>@hotmail.com</li>
<li>@sina.com</li>
<li>@sina.cn</li>
<li>@139.com</li>
</ul>
</div>
</div>
</body>
</html>

*{
  margin:0;
  padding:0
  }
  
body{background:#f3f3f3;font-size:12px;font-family:arial;}

#title{width:320px;margin:3% auto 0;}

h1{font-size:18px;}

h6{ font-size:12px; font-weight:normal; color:#333;margin-bottom:10px; }

h6 a { color:#09c; }

#wrapper{
  width:320px;
  height:30px;
  margin:30px auto 0;
  background:#fff;
  border:1px solid #ccc;
  -moz-border-radius:4px;
  border-radius:4px;
  padding:20px;
  -moz-box-shadow:1px 1px 4px #d3d3d3;
  }

#login_box{position:relative;}

.clearfix label{font-size:14px;float:left;}

.clearfix{height:30px;line-height:30px;}

.clearfix:after{height:0;visibility:hidden;content:'.';overflow:hidden;display:block;}

#email{
  width:180px;
  height:18px;
  border:1px solid #74c9e6;
  padding:5px 6px;
  background:#fff;
  margin-left:10px;
  -moz-border-radius:2px;
  border-radius:2px;
  font-family:arial;
  float:left;
  }

#email_list{
  width:192px;
  list-style:none;
  border:1px solid #74c9e6;
  -moz-border-radius:0 0 2px 2px;
  border-radius:2px;
  position:absolute;
  top:29px;
  left:80px;
  background:#fff;
  display:none;
  }


#email_list li{
  width:100%;
  height:30px;
  line-height:30px;
  text-indent:10px;
  cursor:pointer;
  overflow:hidden;
  }

#email_list li.first_li{cursor:default;}

#email_list .current{background:#baeafb;}

(function() {
  /* 初始化 */
  var emailInput = document.getElementById('email'),
  list = document.getElementById('email_list'),
  items = list.getElementsByTagName('li'),
  item1 = items[1],
  len = items.length,
  suffix = [],
  newSuffix,
  indexA,
  indexB,
  highlight = 'current',
  isIE = navigator.userAgent.toLowerCase().indexOf('msie') != -1,
  clearClassname = function() {
    for (var i = 1,
    el; i < len && (el = items[i]); i++) {
      el.className = '';
    }
  };
  /* 将邮箱后缀存放到一个新数组中 */
  for (var j = 1,
  el; j < len && (el = items[j]); j++) {
    suffix[suffix.length++] = el.innerHTML;
  }
  /* 邮箱输入框绑定keyup事件 */
  emailInput.onkeyup = suggest;
  /* suggest核心部分 */
  function suggest(event) {
    var e = event || window.event,
    eCode = e.keyCode,
    val = this.value,
    index = val.indexOf('@'),
    isIndex = index !== -1;
    clearClassname();
    //输入框不为空
    if (val) {
      item1.className = highlight;
      list.style.display = 'block';
      for (var i = 1,
      el; i < len && (el = items[i]); i++) {
        el.onmouseover = function() {
          clearClassname();
          item1.className = '';
          this.className = highlight;
          indexA = 1;
          indexB = 0;
        }
        el.onmouseout = function() {
          this.className = '';
          item1.className = highlight;
        }
        el.onclick = function() {
          emailInput.value = this.innerHTML;
        }
      }
    }
    //输入框为空
    else {
      item1.className = '';
      for (var i = 1,
      el; i < len && (el = items[i]); i++) {
        el.onmouseout = el.onmouseover = el.onclick = null;
      }
      if (eCode === 38 || eCode === 40 || eCode === 13) return;
    }
    item1.innerHTML = val;
    newSuffix = []; //初始化空数组
    for (var i = 1,
    el; i < len && (el = items[i]); i++) {
      /* 以邮箱后缀和输入框中@标志符后是否
有相同的字符串来显示或隐藏该元素 */
      el.style.display = isIndex && el.innerHTML.indexOf(val.substring(index)) === -1 ? 'none': 'block';
      if (i > 1) el.innerHTML = (isIndex ? val.substring(0, index) : val) + suffix[i - 1];
      /* 出现@标志符时将新的元素的排列顺序
存放到空数组newSuffix中 */
      if ((!isIE && window.getComputedStyle(el, null).display === 'block') || (isIE && el.currentStyle.display === 'block')) {
        newSuffix[newSuffix.length++] = i;
      }
    }
    /* 判断按键 */
    switch (eCode) {
    case 38:
      //上方向键
      keyMove( - 1);
      break;
    case 40:
      //下方向键
      keyMove(1);
      break;
    case 13:
      //回车键
      getVal();
      break;
    default:
      indexA = 1;
      indexB = 0;
      return;
    }
  }
  /* 方向键控制元素的高亮效果 */
  function keyMove(n) {
    var newLen = newSuffix.length;
    if (newLen > 0 && newLen < 8) {
      items[newSuffix[indexB]].className = item1.className = '';
      indexB += n;
      if (indexB === newLen) indexB -= newLen;
      else if (indexB < 0) indexB += newLen;
      items[newSuffix[indexB]].className = highlight;
    } else {
      items[indexA].className = item1.className = '';
      indexA += n;
      if (indexA === len) indexA -= len - 1;
      else if (indexA === 0) indexA += len - 1;
      items[indexA].className = highlight;
    }
  }
  /* 获取当前高亮元素的值 */
  function getVal() {
    var newLen = newSuffix.length;
    emailInput.value = newLen > 0 && newLen < 8 ? items[newSuffix[indexB]].innerHTML: items[indexA].innerHTML;
    list.style.display = 'none';
  }
  /* 关闭提示层 */
  document.onclick = function(e) {
    var e = e || window.event,
    eNode = e.target ? e.target: e.srcElement;
    if (eNode !== emailInput && eNode !== items[0]) {
      list.style.display = 'none';
    }
  }
})();

邮箱suggest