老师请看看,输入内容之后仍旧会弹出“用户名不能为空”
来源:4-11 编程练习
我不是胖球球
2021-06-05 19:15:06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.red {
border: 1px solid red;
}
</style>
</head>
<body>
姓名:<input type="text"> <span></span>
<script type="text/javascript">
var oInput = document.getElementsByTagName('input')[0];
var oSpan = document.getElementsByTagName('span')[0];
var len = oInput.value.length;
oInput.onfocus = function () {
if (len == 0) {
oSpan.innerHTML = '请输入您的姓名'
}
}
oInput.onblur = function () {
if (len == 0) {
oSpan.innerHTML = '用户名不能为空';
oInput.className = 'red'
} else {
oSpan.innerHTML = '';
oInput.className = '';
}
}
</script>
</body>
</html>
1回答
同学你好,这是因为输入框长度提前获取了,默认为0,所以即使改变输入框内容,也改变不了长度。
我们需要在聚焦或者失焦的时候获取,如下:
自己再测试下,祝学习愉快!
相似问题