目录
任务描述
本关任务：使用change事件检验用户的输入。
相关知识
表单，即form，是页面最基本的元素之一，通常，用户的输入会放置在表单里面，然后提交给后台。 form有很多子元素，分别表示不同类型的用户输入：例如input表示文本等类型；select表示下拉列表；button表示按钮。 这些子元素可以被绑定一些事件，比如change表示用户的输入发生了改变。这些事件是表单元素特有的。
change事件
change事件表示当前元素失去焦点并且元素的内容发生了改变。失去焦点，指光标不在该元素上，比如光标本来在文本输入框里面，当用户在页面的其他地方点击了鼠标，文本框就会失去焦点。 下面是一个例子：当用户输入文本，并且鼠标点击页面上的其他地方后，我们将在控制台打印出用户的输入。
<body><form><input id="t1" type="text" onchange="changeEve()"/></form><script>function changeEve() {var e = document.getElementById("t1");console.log(e.value);}</script></body>
比如当用户输入I changed后，在页面的其他地方点击鼠标，控制台如下：
select事件
select事件：文本框中的文本被用户选中时发生。 只能作用在<input type="text">的文本框里面，可以用window.getSelection().toString()获取选择的文本。 下面的例子：当用户选择了一段文本后，我们在控制台打印出用户选择的文本：
<body><input type="text" value="赵钱孙李，周吴郑王" onselect="selectEve()"/><script>function selectEve() {console.log(window.getSelection().toString());}</script></body>
比如我们选择了郑王，然后松开鼠标，控制台的输出如下：
submit事件
指的是表单的提交事件。 表单里面包含了用户输入的信息，最终要传到后台的服务器进行处理，这样就有一个表单的提交过程，submit即表单提交事件。 通常情况下，在submit的事件处理函数中，校验用户的输入是否符合要求，比如密码的长度够不够。 下面的例子，用户提交表单时，用js校验用户输入的密码长度是否达到6位。
<body><form onsubmit="subEve()"><input type="password" id="pw"/><input type="submit" value="提交" /></form><script>function subEve() {var content = document.getElementById("pw").value;if (content.length < 6) {window.alert("密码不可以小于6位");}}</script></body>
这时，用户在密码输入框输入123，点击提交，页面会弹出一个警告框如下：
编程要求
本关的编程任务是补全右侧代码片段中Begin至End中间的代码，具体要求如下：
-
通过
id属性获取id为input的文本框，赋值给变量ele； -
获取输入框中当前文本的长度，赋值给变量
len； -
判断
len的值是否小于等于12，是则打印出too short input； -
字符串参数务必置于双引号之内。
测试说明
测试过程：
-
平台将读取用户补全后的
FormEve1.html； -
执行其中的
JavaScript代码，判断代码是否对用户的输入进行了检测； -
执行了检测输出
成功检查了用户的输入，否则输出没有检查用户的输入。
以下是测试样例：
测试输入： 无测试输入 预期输出： 成功检查了用户的输入
海到无边天作岸，山登绝顶我为峰。 ——林则徐
如果你觉得这一关的内容对你有帮助，请你在下面点赞。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input id="input" type="text" onchange="changeEvent()" />
<input id="input2" type="text" />
</form>
<script>
function changeEvent() {
//请在此处编写代码
/********** Begin **********/
var ele = document.getElementById("input").value;
var len = ele.length;
if(len <= 12)
console.log("too short input");
/********** End **********/
}
</script>
</body>
</html>
3033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
