请老师检查优化
来源：3-8 编程练习
qq_慕先生0342934
2020-05-25 23:06:10
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onload</title>
<script type="text/javascript">
//补充代码
window.onload = function(){
var btn = document.getElementsByTagName("input")[0];
btn.onclick = function(){
btn.style.color = "red";
}
btn.onmouseout = function(){
btn.style.color = "gray";
}
}
</script>
</head>
<body>
<input type="button" value="点击改变按钮字体颜色" >
</body>
</html>
-->
<!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"> <span></span>
<script type="text/javascript">
// 补充代码
var nameinp = document.getElementsByTagName("input")[0],
tip = document.getElementsByTagName("span")[0];
// var nameVal = nameinp.value; //老师这句话写在这里为啥不行，写在这里后面的移出世界就不能正常显示了
nameinp.onfocus = function(){
var nameVal = nameinp.value;
if(nameVal == ""){
tip.innerHTML = "请输入您的姓名";
}
console.log(nameVal.length);
}
nameinp.onblur = function(){
var nameVal = nameinp.value;
if(nameVal == ""){
tip.innerHTML = "用户名不能为空";
nameinp.className = "red";
}else{
tip.innerHTML = "";
nameinp.className = "";
}
console.log(nameVal.length);
}
</script>
</body>
</html>
1回答
-
同学你好，关于同学的问题回答如下：
1、第一段代码是正确的。
2、第二段代码还可以再优化下，当输入框失去焦点再重新聚焦时，可以将红色的样式去掉：
修改参考：
3、关于同学注释的问题，是因为如果在外部直接获取nameinp的value值，获取的就是个定值，不会再发生变化，而我们需要实现的是实时判断输入框的value值，所以要放在鼠标获得焦点和失去焦点时重新获取。
如果我的回答帮助了你，欢迎采纳。祝学习愉快~
0h020-05-26
相似问题