IFE_ECMAScript_Practices/IFE_day28_Practice.html at master · kzone0520/IFE_ECMAScript_Practices · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>IFE DAY28</title>
        <style>
            body, ul, li {margin: 0; padding: 0;}
            body {
                padding: 50px 0 0 200px;

            }
            li { list-style: none;}
            #email-input {
                width: 198px;
                height: 25px;
                outline: none;
            }
            #email-sug-wrapper {
                width: 200px;
                border: 1px solid gray;
                display: none;
                font-size: 14px;
            }
            #email-sug-wrapper li:hover {
                background: yellow;
                cursor: pointer;
            }
            #email-sug-wrapper li.active {
                background: pink;
            }

        </style>
        <script>
            window.onload = function (){

                var oInp = document.getElementById('email-input');
                var oUl = document.getElementById("email-sug-wrapper");
                var oBtn = document.querySelector('button');
                var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];

                // 进入页面输入框获取焦点
                oInp.focus();

                // html转码
                function htmlEncode (html){
                    var temp = document.createElement('div');
                    (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
                    var output = temp.innerHTML;
                    temp = null;
                    return output;
                }
                // html解码
                function htmlDecode(text){
                    var temp = document.createElement('div');
                    temp.innerHTML = text;
                    var output = temp.textContent || temp.innerText;
                    temp = null;
                    return output;
                }

                // 获取用户输入并去除首尾空格
                function getValue(){
                    return oInp.value.trim();
                }

                //生成提示框中的提示内容
                function makeLi(){
                    var liValue = "";
                    // 将输入框内容转码后赋值给inpValue
                    var inpValue = htmlEncode(getValue());
                    var inpValueLast = "";
                    if(inpValue.indexOf('@') >0){
                        inpValueLast = inpValue.slice(inpValue.indexOf('@')+1, inpValue.length);
                        inpValue = inpValue.slice(0, inpValue.indexOf('@')).trim();
                    }
                    for(let item of postfixList){
                        /* 如果inpValueLast = ""，值为0，则显示全部。如果inpValueLast不等于空，且不是某个
                           元素的一部分，比如（inpValueLast=16333333），则值为-1，也显示全部。 */
                        if(item.indexOf(inpValueLast)>=0 || postfixList.join('').indexOf(inpValueLast) == -1){
                            liValue += "<li>" + inpValue + '@' + item + "</li>";
                        }
                    }
                    oUl.innerHTML = liValue;
                }
                /*
                //生成提示框中的提示内容 方法二
                //这是改变postfixList数组的方法来拼接提示内容
                function makeLi(){
                    var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
                    var inpValue = getValue();
                    var liValue = '';
                    if( inpValue.indexOf('@')>0 && inpValue.indexOf('@') < inpValue.length - 1){
                        var new_postfixList = [];
                        var new_inpValue = inpValue.slice(inpValue.indexOf('@')+1, inpValue.length);
                        for( var x of postfixList){
                            if(x.indexOf(new_inpValue) >= 0){
                                new_postfixList.push(x);
                                postfixList = new_postfixList;
                            }
                        }
                    }
                    if( inpValue.indexOf('@')>0){
                        inpValue = inpValue.slice(0, inpValue.indexOf('@'));
                    }
                    for(let item of postfixList){
                        liValue += "<li>" + inpValue + '@' + item + "</li>" ;
                    }
                    return liValue;
                }
                */

                /*
                // 将提示内容添加到ul中   感觉这个函数比较多余且和其他函数有耦合，所以合并到makeLi()里了。
                function appendLi(){
                    oUl.innerHTML = makeLi();
                }
                */
                // 显示ul提示框
                function showUl(){
                    oUl.style.display = 'block';
                }
                // 隐藏ul提示框
                function hideUl(){
                    oUl.style.display = 'none';
                }
                // 控制ul的显示/隐藏状态
                function showOrhide(){
                    return getValue() ? showUl(): hideUl();
                }

                // 监听提示框鼠标点击 及 输入框上下回车键
                function valueIntoInp(){
                    if(oUl.childElementCount){
                        var aLi = oUl.querySelectorAll('li');
                        var n = 0;
                        aLi[n].className = 'active';
                        // 添加监听上下回车键，做出相应动作
                        oInp.onkeydown =function(){
                            var keynum = '';
                            keynum = window.event? event.keyCode: event.which;
                            if(oUl.childElementCount > 0){
                                if(keynum == 40){
                                    aLi[n].className = '';
                                    // 当颜色向下移动到最后一个时，返回到第一个
                                    if(n == aLi.length-1){n = 0;}
                                    else{n++};
                                    aLi[n].className = 'active';
                                }
                                if(keynum == 38){
                                    aLi[n].className = '';
                                    // 当颜色向上移动到第一个时，返回到最后一个
                                    if(n == 0){n = aLi.length-1;}
                                    else{n--};
                                    aLi[n].className = 'active';
                                }
                                /* 按回车键 将内容放到输入框，隐藏提示框，即使隐藏了提示框，按上下键
                                和回车还是有动作，只是看不到了（未解决）。所以设置按回车后将焦点移到右侧按钮上。*/
                                // 以上问题已经解决，在判断keynum之前先判断oUl有没有子元素，回车后将oUl子元素删光。
                                if(keynum == 13){
                                    oInp.value = htmlDecode(aLi[n].innerHTML);
                                    oUl.innerHTML = '';
                                    hideUl();
                                }
                                if(keynum == 27){
                                    oInp.select();
                                }
                            }
                        }
                        // 点击提示，将内容放到输入框
                        for(let item of aLi){
                            item.onclick = function (){
                                oInp.value = htmlDecode(item.innerHTML);
                                // 隐藏放到window的点击事件里
                            }
                        }
                    }
                }

                // 监听输入框的输入
                oInp.oninput = function(){
                    makeLi();
                    showOrhide();
                    valueIntoInp();
                }

                // 点击输入框外的任意空白地方，提示隐藏。
                window.onclick = function(){
                    hideUl();
                }

            }
        </script>
    </head>
    <body>
        <div class="wrapper">
            <input id="email-input" type="text" placeholder="请输入您的邮箱">
            <button type="submit">提交</button>
            <ul id="email-sug-wrapper" class="email-sug"></ul>
        </div>
    </body>
</html>