郵箱輸入實現型別自動提示功能

antzone發表於2017-04-10
原文網址 : https://www.softwhy.com/article-6537-1.html
型別

現在網站都在追求人性化，以期能夠吸引或者留住使用者。

下面分享一個這方面的例項，那就是當使用者在輸入郵箱的時候，能夠自動提示郵箱的型別，這就免去了輸入是何種型別郵箱的麻煩。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.demo p {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.input {
  padding: 12px;
  width: 300px;
  border: 1px solid #c2c2c2;
  border-radius: 4px;
  box-shadow: 0 0 1px #fff, inset 0 0 2px rgba(0,0,0,.15);
  background-color: #F2F2F2;
  font-size: 14px;
}
.emailist {
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  background-color: #fff;
  color: #666;
  font-size: 14px;
  list-style-type: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.emailist li {
  padding: 2px 11px;
  cursor: pointer;
}
.emailist .on, .emailist li:hover {
  background-color: #eee;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
(function ($) {
  $.fn.mailAutoComplete = function (options) {
    var defaults = {
      className: "emailist",
      email: ["qq.com", "gmail.com", "126.com", "163.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "live.com", "sohu.com", "sina.com"],
      zIndex: 11
    };
    // 最終引數
    var params = $.extend({}, defaults, options || {});
 
    // 是否現代瀏覽器
    var isModern = typeof window.screenX === "number", visibility = "visibility";
    // 鍵值與關鍵字
    var key = {
      "up": 38,
      "down": 40,
      "enter": 13,
      "esc": 27,
      "tab": 9
    };
    // 組裝HTML的方法
    var fnEmailList = function (input) {
      var htmlEmailList = '', arrValue = input.value.split("@"), arrEmailNew = [];
      $.each(params.email, function (index, email) {
        if (arrValue.length !== 2 || arrValue[1] === "" || email.indexOf(arrValue[1].toLowerCase()) === 0) {
          arrEmailNew.push(email);
        }
      });
      $.each(arrEmailNew, function (index, email) {
        htmlEmailList = htmlEmailList + '<li' + (input.indexSelected === index ? ' class="on"' : '') + '>' + arrValue[0] + "@" + email + '</li>';
      });
      return htmlEmailList;
    };
    // 顯示還是隱藏
    var fnEmailVisible = function (ul, isIndexChange) {
      var value = $.trim(this.value), htmlList = '';
      if (value === "" || (htmlList = fnEmailList(this)) === "") {
        ul.css(visibility, "hidden");
      }
      else {
        isIndexChange && (this.indexSelected = -1);
        ul.css(visibility, "visible").html(htmlList);
      }
    };
 
    return $(this).each(function () {
      this.indexSelected = -1;
      // 列表容器建立
      var element = this;
      var eleUl = $('<ul></ul>').css({
        position: "absolute",
        marginTop: element.offsetHeight,
        minWidth: element.offsetWidth - 2,
        visibility: "hidden",
        zIndex: params.zIndex
      }).addClass(params.className).bind("click", function (e) {
        var target = e && e.target;
        if (target && target.tagName.toLowerCase() === "li") {
          $(element).val(target.innerHTML).trigger("input");
          $(this).css(visibility, "hidden");
          element.focus(); // add on 2013-11-20
        }
      });
      $(this).before(eleUl);
      // IE6的寬度
      if (!window.XMLHttpRequest) { eleUl.width(element.offsetWidth - 2); }
 
      // 不同瀏覽器的不同事件
      isModern ? $(this).bind("input", function () {
        fnEmailVisible.call(this, eleUl, true);
      }) : element.attachEvent("onpropertychange", function (e) {
        if (e.propertyName !== "value") return;
        fnEmailVisible.call(element, eleUl, true);
      });
 
      $(document).bind({"click": function (e) {
        var target = e && e.target, htmlList = '';
        if (target == element && element.value && (htmlList = fnEmailList(element, params.email))) {
          eleUl.css(visibility, "visible").html(htmlList);
        }
        else if (target != eleUl.get(0) && target.parentNode != eleUl.get(0)) {
          eleUl.css(visibility, "hidden");
        }
      },
      "keydown": function (e) {
        var eleLi = eleUl.find("li");
        if (eleUl.css(visibility) === "visible") {
          switch (e.keyCode) {
            case key.up: {
              element.indexSelected--;
              if (element.indexSelected < 0) {
                element.indexSelected = -1 + eleLi.length;
              }
              e.preventDefault && e.preventDefault();
              break;
            }
            case key.down: {
              element.indexSelected++;
              if (element.indexSelected >= eleLi.length) {
                element.indexSelected = 0;
              }
              e.preventDefault && e.preventDefault();
              break;
            }
            case key.enter: {
              e.preventDefault();
              eleLi.get(element.indexSelected) && $(element).val(eleLi.eq(element.indexSelected).html());
              eleUl.css("visibility", "hidden");
              break;
            }
            case key.tab: case key.esc: {
              eleUl.css("visibility", "hidden");
              break;
            }
          }
          if (element.indexSelected !== -1) {
            eleUl.html(fnEmailList(element));
          }
        }
      }
    });
  });};
})(jQuery);
$(document).ready(function () {
  $(".inputMailList").mailAutoComplete();
})
</script>
</head>
<body>
<div class="demo">
  <p><input type="email" class="input inputMailList" name="email" placeholder="請輸入郵箱" ></p>
</div>
</body>
</html>

相關文章