老师 我在输入框内输入空格不会显示用户名不能为空，我想要实现输入的空格也显示用户名不能为空，应该怎么样实现呢？
来源：4-11 编程练习
慕田峪6072870
2021-01-15 15:11:06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onblur和onfocus</title>
<style type="text/css">
.red{
border:1px solid red;
}
</style>
</head>
<body>
姓名：<input type="text" id="input"> <span id="span"></span>
<script type="text/javascript">
// 补充代码
var input = document.getElementById('input');
var span = document.getElementById('span');
input.onfocus = function() {
span.innerText = '请输入您的姓名';
}
input.onblur = function() {
if (input.value == '') {
input.className = 'red';
span.innerText = '用户名不能为空！';
} else {
span.innerText = '';
input.className = '';
}
}
</script>
</body>
</html>
1回答
-
同学你好，trim()的作用是去掉字符串两端的多余空格。可以加上判断条件，使用trim()方法去除空格，当输入框内的长度为小于1，显示用户名不能为空
另外第一次不输入内容失焦的时候边框变为红色，再次聚焦的时候边框颜色重叠，可以在聚焦的时候加一下边框颜色，可以优化一下。
祝学习愉快！
0
相似问题