JavaScript實現郵箱後綴提示功能的示例代碼

原創 JoeJoan 2018-12-17 02:22

這篇文章主要介紹了JavaScript實現郵箱後綴提示功能的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨着小編來一起學習學習吧

先來個基礎的

需求

  • 根據下面需求實現如示意圖所示的郵箱輸入提示功能，注意，根據要求只需實現下面功能
  • 當用戶沒有任何輸入時，提示框消失
  • 當用戶輸入字符後，顯示提示框，並且把用戶輸入的內容自動拼上郵箱後綴進行顯示
  • 暫時不用考慮示意圖中的紅色和藍色背景色的邏輯
  • 注意用戶輸入中前後空格需要去除

小優化編碼

需求

如果我們輸入的是 abc@1，這個時候出現的提示框內容是

很明顯，上面的提示框不是一個符合用戶需求的提示，我們需要做一些優化：

當用戶輸入含有 @ 符號時，我們選取用戶輸入的@前面的字符來和後綴拼接

需求

這下出現的提示好多了，不過用戶如果已經輸入了@1，說明他大概率要輸入163或者126，我們需要讓我們的提示更加符合用戶的期望。滿足以下需求：

當用戶輸入了 @ 及部分後綴時，只從 postfixList 選取符合用戶輸入預期的後綴，我們以前綴匹配爲要求。

當用戶輸入不滿足任何前綴匹配時，則顯示全部提示

測試用例

<!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>，看看提示框發生了什麼

閱讀

Web安全之XSS攻防

javascript對HTML字符轉義與反轉義

設計

我們需要在兩個地方進行處理，一個是在生成提示內容那裏，對於特殊字符進行轉義編碼，另一個是在把鼠標點擊的提示框內容轉回輸入框時進行解碼。

代碼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核心原理解析

wy53780 2020-04-23 14:02:41

再学JavaScript ES(6-10)全版本语法大全

wy53780 2020-04-23 13:58:55

前端埋点 - 报错监控

mriliujy 2019-07-11 16:14:54

JavaScript ES2019 中的 8 項新功能

前端高達 2019-02-24 13:48:04

用JavaScript刷新框架子頁面的方法

princesstor015 2019-02-23 13:37:36

分享Javascript開發經驗

yuncash 2019-02-23 13:25:11

AJAX入門教程理解JavaScript中的函數

剛剛 2019-02-23 12:57:19

深度解析JavaScript事件對象之信用盤源碼出售

yihujiu 2019-02-23 12:54:46

隨心郵怎麼使用，據說可以微信收發郵件？

xianxiannv 2019-02-23 13:22:59

刪除Exchange2010數據庫報錯“此郵箱數據庫與一個或多個活動 MailboxExport 隊列關聯”

刪城人家 2019-02-23 13:10:25

刪除Exchange 2010 中的已斷開連接郵箱

boybxie 2019-02-23 13:04:28

Exchange 2010 發現郵箱的重建

boybxie 2019-02-23 13:04:17

如何批量註冊郵箱，無需手機號即可註冊！

甜而不膩 2019-02-23 12:50:41

Exchange系列—管理代理髮送功能及郵件轉發

好棋 2019-02-23 00:40:27

XP的部分文件名後綴

179390988 2019-02-23 14:05:54