js的input检测（给爱的人发个邮件吧）

最新推荐文章于 2022-08-30 15:29:37 发布

颖_恋

最新推荐文章于 2022-08-30 15:29:37 发布

阅读量1.3k

点赞数 2

文章标签： js

本文链接：https://blog.csdn.net/line233/article/details/82469611

版权

本文通过一个邮箱输入提示功能的练习，讲解如何使用JavaScript进行问题分解、代码设计和优化。内容包括监听用户输入事件、获取用户输入、生成提示内容、处理@符号后的匹配以及添加键盘交互等，旨在提升JavaScript编程能力。

摘要由CSDN通过智能技术生成

通过一系列的练习掌握如何分解问题、解决问题，在这个过程中如何设计自己的代码结构，如何优化及重构。

课程描述

通过一个小练习综合运用 HTML、CSS、JavaScript，我们要实现一个邮箱输入的提示功能。最终示意图：

示例图

部分代码参考：

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

// 邮箱后缀List参考
var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];

先来个基础的

需求

根据下面需求实现如示意图所示的邮箱输入提示功能，注意，根据要求只需实现下面功能

当用户没有任何输入时，提示框消失
当用户输入字符后，显示提示框，并且把用户输入的内容自动拼上邮箱后缀进行显示
暂时不用考虑示意图中的红色和蓝色背景色的逻辑
注意用户输入中前后空格需要去除

设计

从今天开始，我们希望你在写代码之前开始画流程图

请阅读：流程图怎么画

推荐工具：

Processon

对于有经验的同学，你们可以跳过下面的部分，零基础的同学请跟着我一起进行设计。

这个任务的总目标是用户有输入的时候，进行对应的提示，所以核心流程是：

用户输入->提示框进行反馈

那核心流程进一步进行拆解，就包括了：

发现用户输入->获取用户输入内容->生成提示框提示内容->进行提示

第一步，发现用户输入，可以利用监听用户在输入框的输入对应的事件，尝试用keyup, keypress, keydown以及oninput四个事件分别来测试对于用户输入的事件监听，并在事件响应函数中增加console.log('event handle')。并尝试以下输入方式，观察提示框内容变化的情况，以及console的输出情况：

一个字母一个字母的输入
一个字母一个字母输入，同时加上按回车键，ESC键，上下左右键
按住某个字母键不动

记住试验结论，然后就上面4个事件进行搜索，阅读相关规范标准及技术文章。根据实验结果选择你认为合适的事件监听方式。

第一步是后面几步的起点，所以，我们可以把后面几步各自封装成一个函数，在第一步里进行调用

第二步，获取用户输入，这个比较简单，注意考虑trim

第三步，生成提示框提示内容，根据第二步获得的内容，遍历postfixList数组，生成要在email-sug-wrapper的UL中填充的内容。

第四步，根据实际是否有提示内容，控制email-sug-wrapper的显示/隐藏情况

这样，这个任务被分解为4个步骤，你要做的就是实现这4个步骤的代码细节。

代码结构参考如下：

inputDom的输入监听 = function() {
    获取用户输入，生成提示框中的提示内容，将提示内容添加到email-sug-wrapper中
    控制email-sug-wrapper的显示/隐藏状态
}

function 获取用户输入() {
    拿到input输入框的输入内容trim后返回    
}

function 生成提示框中的提示内容() {
    获取用户输入
    遍历postfixList {
        把用户输入和每一个postfix进行结合成为每一个Li
    }
    返回生成的提示内容
}

function 将提示内容添加到email-sug-wrapper中() {
    获取生成提示框中的提示内容
    将内容添加到email-sug-wrapper中
}

function 控制email-sug-wrapper的显示/隐藏状态() {
    if 用户输入为空 {
        隐藏提示框
    } else {
        显示提示框
    }
}

function 隐藏提示框() {
    做具体隐藏提示框的操作
}

function 显示提示框() {
    做具体显示提示框的操作
}

测试用例：