IFE第二十八天到第三十天：给爱的人发个邮件吧（邮箱输入下拉框提示功能）

最新推荐文章于 2020-07-31 11:44:50 发布
最新推荐文章于 2020-07-31 11:44:50 发布
阅读量1.4k 收藏
点赞数 3
分类专栏： JavaScript 文章标签： JavaScript 邮箱输入下拉框提示功能 IFE 百度前端技术学院
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_34074514/article/details/82051829
版权

task1

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
    <style>
        .email-sug {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            width: 150px;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
        }

        li:hover {
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input id="email-input" type="text">
        <ul id="email-sug-wrapper" class="email-sug"></ul>
    </div>

    <script>
        var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
        var input = document.getElementById("email-input");
        var ul = document.getElementById("email-sug-wrapper");

        input.oninput = function () {
            getInput();
            addPrompt();
            displayOrHide();
        };

        ul.onclick = function (e) {
            var ev = e || window.event;　　　　
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toUpperCase() == 'LI') {
                input.value = target.innerText;
                hide();
            }
        }

        function getInput() {
            //拿到input输入框的输入内容trim后返回
            var input1 = input.value;
            return input1.trim();
        }

        //生成提示框中的提示内容
        function setPrompt() {
            var input1 = getInput();
            var input2, input3;
            var flag = 0; //“@”后的字符串能否在postfixList中找到匹配
            if (input1.indexOf("@") == -1) {
                input2 = input1;
            } else {
                input2 = input1.slice(0, input1.indexOf("@"));
                input3 = input1.slice(input1.indexOf("@") + 1);
                console.log(input3)
            }
            var res = new Array();
            for (var i = 0; i < postfixList.length; i++) {
                if (postfixList[i].indexOf(input3) == 0) {
                    res[i] = input2 + '@' + postfixList[i];
                    flag = 1;
                    console.log(res)
                }
            }
            if (flag == 0) {
                for (var i = 0; i < postfixList.length; i++) {
                    res[i] = input2 + '@' + postfixList[i];
                }
            }
            //去除res数组中的空值
            for (var i = 0; i < res.length; i++) {
                if (typeof res[i] == "undefined" || res[i] == "") {
                    res.splice(i, 1);
                    i--;
                }
            }
            return res;
        }

        function addPrompt() {
            var prompt = setPrompt();
            var len = ul.childNodes.length;
            //removechild()正常的删除全部节点，应该从后面往前删除。
            //原因是当你把索引为0的子节点删除后，那么原来索引为1节点此时它的索引变成0了，而这时变量i已经变成1了，程序继续走时就会删除原先索引为２的现在为1的节点，这样程序运行的结果就是只删除了一半的子节点。
            for (var i = len - 1; i >= 0; i--) {
                ul.removeChild(ul.childNodes[i]);
            }
            for (var i = 0; i < prompt.length; i++) {
                var li = document.createElement('li');
                li.innerHTML = prompt[i];
                ul.appendChild(li);
            }
        }

        function displayOrHide() {
            var input1 = getInput();
            if (input1 == "") {
                hide();
            } else {
                display();
            }
        }

        function hide() {
            ul.style.display = "none";
        }

        function display() {
            ul.style.display = "block";
        }
    </script>
</body>

</html>

task2（加上键盘——基于DOM的思路）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
    <style>
        .email-sug {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            width: 150px;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
        }

        li:hover {
            background-color: antiquewhite;
        }

        .selected {
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input id="email-input" type="text">
        <ul id="email-sug-wrapper" class="email-sug"></ul>
    </div>

    <script>
        var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
        var input = document.getElementById("email-input");
        var ul = document.getElementById("email-sug-wrapper");

        var selected = 0;
        var selectedLi = null;

        input.onkeyup = function (event) {
            var event = event || window.event;
            addPrompt();
            displayOrHide();
            if (event.keyCode != 13 && event.keyCode != 108 && event.keyCode != 38 && event.keyCode != 40) {
                resetState();
            }
            var list = ul.querySelectorAll('li');
            if (selectedLi == null) {
                selectedLi = ul.querySelector('li:first-child');
                selectedLi.classList.add('selected');
            }
            for (var i = 0; i < list.length; i++) {
                if (list[i].getAttribute("class") == 'selected') {　
                    selected = i;　
                    selectedLi = list[i];
                }
            }
            // 按的是上键
            if (event.keyCode == 38) {
                // 找到的Li不是第一个
                selectedLi.classList.remove('selected');
                if (selected != 0) {
                    // 将它的前一个Li设为选中
                    selectedLi = list[--selected];
                    selectedLi.classList.add('selected');
                } else {
                    // 将最后一个Li设为选中
                    selectedLi = list[list.length - 1];
                    selectedLi.classList.add('selected');
                    selected = list.length - 1;
                }
            }
            // 按的是下键
            if (event.keyCode == 40) {
                selectedLi.classList.remove('selected');
                // 找到的Li不是最后一个
                if (selected != list.length - 1) {
                    // 将它的下一个Li设为选中
                    selectedLi = list[++selected];
                    selectedLi.classList.add('selected');
                } else {
                    // 将第一个Li设为选中
                    selectedLi = list[0];
                    selectedLi.classList.add('selected');
                    selected = 0;
                }
            }
            // 按的是回车
            if (event.keyCode === 13) {
                // 将找到的Li的HTML内容解码后填到input中
                // 隐藏提示框
                input.value = selectedLi.textContent;
                hide();
            }
        };

        ul.onclick = function (e) {
            var ev = e || window.event;　　　　
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toUpperCase() == 'LI') {
                input.value = target.innerText;
                hide();
            }
        }

        function resetState() {
            var firstLi = ul.querySelector('li:first-child');
            var selectedLi = ul.querySelector('li.selected');
            if (selectedLi != null) {
                if (firstLi != selectedLi) {
                    selectedLi.classList.remove('selected');
                    firstLi.classList.add('selected');
                }
            } else {
                firstLi.classList.add('selected');
            }
        }

        function getInput() {
            //拿到input输入框的输入内容trim后返回
            var input1 = input.value;
            return input1.trim();
        }

        //生成提示框中的提示内容
        function setPrompt() {
            var input1 = getInput();
            var input2, input3;
            var flag = 0; //“@”后的字符串能否在postfixList中找到匹配
            if (input1.indexOf("@") == -1) {
                input2 = input1;
            } else {
                input2 = input1.slice(0, input1.indexOf("@"));
                input3 = input1.slice(input1.indexOf("@") + 1);
            }
            var res = new Array();
            for (var i = 0; i < postfixList.length; i++) {
                if (postfixList[i].indexOf(input3) == 0) {
                    res[i] = document.createElement('li');
                    res[i].innerText = input2 + '@' + postfixList[i];
                    flag = 1;
                }
            }
            if (flag == 0) {
                for (var i = 0; i < postfixList.length; i++) {
                    res[i] = document.createElement('li');
                    res[i].innerText = input2 + '@' + postfixList[i];
                }
            }
            //去除res数组中的空值
            for (var i = 0; i < res.length; i++) {
                if (typeof res[i] == "undefined" || res[i].innerText == "") {
                    res.splice(i, 1);
                    i--;
                }
            }
            return res;
        }

        function addPrompt() {
            var prompt = setPrompt();
            var len = ul.childNodes.length;
            //removechild()正常的删除全部节点，应该从后面往前删除。
            //原因是当你把索引为0的子节点删除后，那么原来索引为1节点此时它的索引变成0了，而这时变量i已经变成1了，程序继续走时就会删除原先索引为２的现在为1的节点，这样程序运行的结果就是只删除了一半的子节点。
            for (var i = len - 1; i >= 0; i--) {
                ul.removeChild(ul.childNodes[i]);
            }
            for (var i = 0; i < prompt.length; i++) {
                ul.appendChild(prompt[i]);
            }
        }

        function displayOrHide() {
            var input1 = getInput();
            if (input1 == "") {
                hide();
            } else {
                display();
            }
        }

        function hide() {
            ul.style.display = "none";
        }

        function display() {
            ul.style.display = "block";
        }
    </script>
</body>

</html>

task3（加上键盘——基于数据的思路）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
    <style>
        .email-sug {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            width: 150px;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
        }

        li:hover {
            background-color: antiquewhite;
        }

        .selected {
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input id="email-input" type="text">
        <ul id="email-sug-wrapper" class="email-sug"></ul>
    </div>

    <script>
        // 增加一个变量，用于存储当前选中的提示Li的序号
        var nowSelectTipIndex = 0;
        var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
        var input = document.getElementById("email-input");
        var ul = document.getElementById("email-sug-wrapper");

        input.addEventListener("keyup", function (event) {
            var event = event || window.event;　
            //如果按键不是上下及回车重置选中状态
            if (event.keyCode != 13 && event.keyCode != 108 && event.keyCode != 38 && event.keyCode != 40) {
                resetIndex();
            }
            if (event.keyCode == 38) {
                if (nowSelectTipIndex == 0) {
                    nowSelectTipIndex = ul.childNodes.length - 1;
                } else {
                    nowSelectTipIndex--;
                }
            }
            if (event.keyCode == 40) {
                if (nowSelectTipIndex >= ul.childNodes.length - 1) {
                    nowSelectTipIndex = 0;
                } else {
                    nowSelectTipIndex++;
                }
            }
            addPrompt();
            displayOrHide();
            if (event.keyCode == 13 || event.keyCode == 108) {
                // 从当前提示框中选第 nowSelectTipIndex 个Li，将其HTML内容解码后填到input中
                input.value = ul.childNodes[nowSelectTipIndex].innerText;
                hide();
            }
        });

        ul.onclick = function (e) {
            var ev = e || window.event;　　　　
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toUpperCase() == 'LI') {
                input.value = target.innerText;
                hide();
            }
        }

        function resetIndex() {
            nowSelectTipIndex = 0;
        }

        function getInput() {
            //拿到input输入框的输入内容trim后返回
            var input1 = input.value;
            return input1.trim();
        }

        //生成提示框中的提示内容
        function setPrompt() {
            var input1 = getInput();
            var input2, input3;
            var flag = 0; //“@”后的字符串能否在postfixList中找到匹配
            if (input1.indexOf("@") == -1) {
                input2 = input1;
            } else {
                input2 = input1.slice(0, input1.indexOf("@"));
                input3 = input1.slice(input1.indexOf("@") + 1);
            }
            var res = new Array();
            for (var i = 0; i < postfixList.length; i++) {
                if (postfixList[i].indexOf(input3) == 0) {
                    res[i] = document.createElement('li');
                    res[i].innerText = input2 + '@' + postfixList[i];
                    flag = 1;
                }
            }
            if (flag == 0) {
                for (var i = 0; i < postfixList.length; i++) {
                    res[i] = document.createElement('li');
                    res[i].innerText = input2 + '@' + postfixList[i];
                }
            }
            //去除res数组中的空值
            for (var i = 0; i < res.length; i++) {
                if (typeof res[i] == "undefined" || res[i].innerText == "") {
                    res.splice(i, 1);
                    i--;
                }
            }
            //将第nowSelectTipIndex个Li的样式设置为被选样式
            res[nowSelectTipIndex].className = 'selected';
            console.log(res);
            console.log(nowSelectTipIndex);
            return res;
        }

        function addPrompt() {
            var prompt = setPrompt();
            var len = ul.childNodes.length;
            //removechild()正常的删除全部节点，应该从后面往前删除。
            //原因是当你把索引为0的子节点删除后，那么原来索引为1节点此时它的索引变成0了，而这时变量i已经变成1了，程序继续走时就会删除原先索引为２的现在为1的节点，这样程序运行的结果就是只删除了一半的子节点。
            for (var i = len - 1; i >= 0; i--) {
                ul.removeChild(ul.childNodes[i]);
            }
            for (var i = 0; i < prompt.length; i++) {
                ul.appendChild(prompt[i]);
            }
        }

        function displayOrHide() {
            var input1 = getInput();
            if (input1 == "") {
                hide();
            } else {
                display();
            }
        }

        function hide() {
            ul.style.display = "none";
        }

        function display() {
            ul.style.display = "block";
        }
    </script>
</body>

</html>

 

爷爷我回来了
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
10-28
基于jQuery的input输入框下拉提示层，方便用户输入邮箱时的提示信息，需要的朋友可以参考下
Baidu-IFE:百度前端技术学院http
03-24
第二十八天到第三十天给爱的人发个邮件吧 第三十一到第三十三天：我是精明的小卖家（一） 第三十四天到第三十六天：我是精明的小卖家（二） 第三十七天到第三十八天：我是精明的小卖家（三） 第三十九天到第四...
第二十八天到第三十天 给爱的人发个邮件吧-IFE
weixin_34268579的博客
08-26 193
第二十八天到第三十天 给爱的人发个邮件吧 日期 总用时 学习目标 2018.08.25-2018.08.26 6h 实现邮件提示 学习目标 实现输入框输入时提示邮件后缀 学习内容 教程 教程 流程图怎么画 Web 安全之 XSS 攻防 Javascript 对 HTML 字符转义与反转义 MDN 键盘 测试 key.code...
百度前端技术学院：第二十八天到第三十天 给爱的人发个邮件吧
Xiaoyi_Xie的博客
09-17 1142
基于数据，我们设置一个变量，来保存当前选择的index（即当前选中的是第几行，从0开始计数），当发生上下键操作的时候，直接改变index值，然后重新渲染提示框中的所有html内容，根据index设置来操作后的选择提示样式，回车的时候，直接根据index来获取对应的内容。 &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;
js 给爱的人发个邮件吧
苏小锅的博客
07-13 1229
git作业地址 https://suyaru.github.io/Pre/Pre31/work01.html 原题 http://ife.baidu.com/course/detail/id/52 代码： &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="jquery/jquery-...
第二十八天到第三十天 给爱的人发个邮件吧（百度前端学院）
宇华的博客
07-31 199
第二十八天到第三十天 给爱的人发个邮件吧（百度前端学院）思路如何生成li如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 大致流程： 思路 如何生成li 如何改变文本的样式 强调文本 强调文本 加粗文本 加粗文本 标记文本 删除文本 引用文本 H2O is是液体。 2
2018IFE:2018IFE学习
04-28
让你和页面对话课程 作业练习九：JavaScript里面的居民们课程 作业练习十：倒数开始 滴答滴 滴答滴课程 作业练习十一：给爱的人发个邮件吧课程 作业练习十二：我是精明的小卖家(MIS系统)课程 作业练习十三：开一家...
IFE:百度前端技术学院（2018）
05-10
给爱的人发个邮件吧（28-30） 输入邮箱时提示、自动补全、方向键选择 我是精明的小卖家（一）（31-33） 数据报表，根据选择项渲染表格 我是精明的小卖家（二）（34-36） 数据报表，根据选择项渲染表格和图表 svg ...
baidu-tasks:百度ife项目
05-01
在util.js中实现了一个小的常用函数库，并运用自己的函数库实现了表单输入，倒计时工具，轮播图，输入提示框和界面拖拽交互工具。 task0003 学习了JavaScript更深层的知识，包括作用域、原型、闭包、构造函数等。...
ife_summer_mob:ife移动网络应用程序的夏季培训
05-09
ife_summer_mob ##百度前端技术学院-暑假训练营（移动扬帆班） ###v1.0 包含的库：zepto.js、artTemplate.js、...在实习之余写的，由于一个人，技术也比较菜，做了这么久，没能在截止日期前完成，哎_(:зゝ∠)_ 在
第二十八天
qq_45760401的博客
03-28 139
class Solution { public: bool canJump(vector<int>& nums) { if (nums.size() == 1) return true; vector<int>::iterator it; it = nums.begin(); Repeat: ...
百度前端 第二十八天到三十天
tp27933的博客
06-04 246
今日開始學習写代码之前开始画流程图 目標: 建立一個純js搜索提示框 当用户没有任何输入时，提示框消失 当用户输入字符后，显示提示框，并且把用户输入的内容自动拼上邮箱后缀进行显示 注意用户输入中前后空格需要去除 心得: 整體的思路並不難，需要花時間的地方是如何將需求包裝成個別的函數。 首先整個的事件會跟input有關所以在每次輸入時調用函數 input.addEventListener('input', function (e) { addPrompt()
毕业设计第二十八天
Tooth1ess的博客
03-15 283
局域网的局限，最后还是要用外网———-今天一直在调试我的代码，早上的时候以为已经可以实现登陆功能，但是发现这个短信验证的sdk是要联网了，而我的服务器是局域网，这就不能一起使用了，最后决定还是要抛弃到局域网，使用外网来读取上传数据。———-发现安卓除了前端的东西外，最主要的还是后端的开发，因为应用还是数据上的交流比较多，如果不联网的话，一个安卓工程师就够了，开发一个单机应用，这样的功能就减轻了很多，
百度前端技术学院第二十到第二十一天：让你和页面对话
Xiaoyi_Xie的博客
09-06 955
在HTML中增加上面的代码，然后通过JavaScript编写如下功能： 当点击按钮 submit-btn 时，在console中输出 name 中的内容。 在输入过程中，如果按回车键，则同样执行上一条的需求。 在输入过程中，如果按 ESC 键，则把输入框中的内容清空。 &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;a
百度前端技术学院28-30学习笔记1
MING23333的博客
10-12 173
trim()方法删除字符串开始和末尾的空格 HTMLEncode 方法对一段指定的字符串应用 HTML 编码。 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 语法 substring() 方法用于提取字符串中介于两个指定下标之间的字符 stringObject.substring(start,stop) childNodes 属性可返回 document 的子节点的...
js邮箱（给爱的人发个邮件吧）
qq_45358338的博客
08-25 3033
需求： 1、当用户没有任何输入时，提示框消失 2、当用户输入字符后，显示提示框，并且把用户输入的内容自动拼上邮箱后缀进行显示 3、暂时不用考虑示意图中的红色和蓝色背景色的逻辑 4、注意用户输入中前后空格需要去除 一、HTML部分 <div class="wrapper"> <input id="email-input" type="text"> <ul...
ife task1
chinalihua的博客
09-14 262
1、标题标签 2、无序列表ul标签 .list li{list-style-type:none} 3、有序列表ol 4、加粗 5、图片 6、table 表头 表头 表头 表内单元格 表内单元格 a href="">操作 表内单元格 表内单元格 a href="">操作 表内单
【c语言】输入一个整数，将每一位数字输出
热门推荐
日拱一卒，不期速成！
01-02 3万+
程序需求:输入一个整数，将每一位数字输出 编程思路:将每一位输出来，我们可以先获取这个数的最高权位是多少 t = number; 将从键盘上获取的数 拷贝一份给t while(t>=10) 中 主要的作用是获取最高位数 power*=10 每执行一次就*10 t/=10 对一个数整除 假如我们输入一个数字: 123 执行完成之后，power 中存储的是100 ...
在camera中IFE与IPE的关系
最新发布
05-19
IFE和IPE是相机处理图像的两个核心模块，它们之间存在一定的关系。 IFE主要负责相机采集图像数据的前置处理，包括色彩处理、去噪、增强、锐化等操作。IFE的输出是经过预处理的RAW图像数据，通常是12位或14位的数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值