为什么提示总是显示？

首页课程实战体系课手记专栏慕课教程

为什么提示总是显示？

来源：3-8 编程练习

Aurora_Meteor

2020-03-04 21:18:49

<!DOCTYPE html>

<html>

<head>

<title>onblur和onfocus</title>

.red{

border:1px solid red;

}

</style>

</head>

<body>

姓名：<input type="text"> <span></span>

// 补充代码

var t=document.getElementsByTagName('input')[0];

var s=document.getElementsByTagName('span')[0];

t.onfocus=function(){

if(t.innerHTML==""){

s.innerHTML='请输入您的姓名';

}

t.onblur=function(){

if(t.innerHTML==""){

s.innerHTML='用户名不能为空';

t.className='red';

}else{

s.innerHTML="";

t.removeAttribute('class');

}

</script>

</body>

</html>

写回答

2回答

好帮手慕星星

2020-03-05

已采纳

同学你好，代码优化如下：

1、input标签中的值是通过value属性获取的，并不是innerHTML属性

2、可以在聚焦的时候清除原有的样式，避免重叠

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

hurora_Meteor

h 1、如果在onfocus中就清除了样式，在onblur中else部分就不需要清除了对吧？二者作用一样的吧？ 2、为什么改变onblur中innerHTML为value就可以了呢？我试了一下，在onblur里面改变以后，把onfocus中的innerHTML改为value没有影响，效果依旧可以实现；但是如果onblur里面还是innerHTML的话，那onfocus里面改不改效果都不会出现，这是为什么？

h020-03-05

共1条回复

好帮手慕星星

2020-03-05

同学你好，问题解答如下：

1、无论输入框中是否有内容，innerHTML属性值都是空字符串，所以onfocus事件中使用innerHTML属性来判断逻辑上是可以的，但是可能有些不严谨，推荐使用value属性。

2、onfocus事件中添加清除样式主要是清除上一次（红色）的样式。例如第一次聚焦时没有输入内容，失去焦点边框变为红色，再次聚焦的时候颜色就会叠加：