目录
任务描述
本关任务:使用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>