JavaScript实现邮箱后缀提示功能

• Web安全之XSS攻防

• javascript对HTML字符转义与反转义

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

代码2

    
    
    
    #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;
    }    



    
        
        

        
    
    

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

• 当有提示框的时候，默认第一个提示为被选择状态，用一个和鼠标滑过不一样的背景色来标识

• 当有输入框的时候，按上键，可以向上移动选择状态，如果按键之前的被选择提示是第一个，则被选状态移到最下面一个

• 当有输入框的时候，按下键，可以向下移动选择状态，如果按键之前的被选择提示是最后一个，则被选状态移到第一个

• 当有输入框时，按回车键，则将当前被选中状态的提示内容，放到输入框中，并隐藏提示框

• 当没有输入框的时候，这3个键盘按键无响应

• 当用户输入发生改变的时候，选择状态都重新切回到第一个提示

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

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

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

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

代码3

  1   2   3   4   5       6       7       8         #input-email{  9         width: 300px; 10         height: 30px; 11     } 12     .email-sug{ 13         width: 300px; 14         list-style: none; 15         padding: 0px; 16         margin: 0px; 17         border: 2px solid rgba(134, 132, 132,0.3); 18         border-top:none; 19         display: none; 20          21     } 22     .email-sug li{ 23         width: 300px; 24         height: 30px; 25         background-color: #ffffff; 26         color: darkgrey; 27         line-height: 30px;    
 28         overflow: hidden; 29         padding-left: 10px; 30         box-sizing: border-box; 31     } 32     .email-sug li:hover{ 33         background-color:skyblue; 34     } 35     .email-sug li.active{ 36         background-color:pink; 37     } 38      39  40  41  42      43          44          45  46          47      48     218 219 220 

最终效果如图：

原文出处：https://www.cnblogs.com/Joe-and-Joan/p/10111099.html