为什么没有效果？
来源：4-3 编程练习
王嘉炜
2019-12-10 16:31:30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>习题</title>
</head>
<body>
<input type="text" value=""><span></span>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
//此处写代码
$(document).ready(function(){
$('input').foucs(function(){
$('span').text("请输入用户名").css({'color':'black'});
});
$('input').blur(function(){
if($('span').val()==""){
$('span').text("用户名不能为空").css({'color':'red'});}
else{
$('span').text(""));
}
});
});
</script>
</body>
</html>
3回答
-
好帮手慕言
2019-12-10
同学你好，使用同学第二次提供的代码测试，有以下问题
1、效果图是：如果在输入框失去焦点时，没有输入内容，边框变为红色。同学的效果是输入框后面的提示文字字体颜色变为红色。建议：修改边框颜色。代码参考：
2、修改后上方的代码，当聚焦之后没有输入内容，失焦之后再聚焦，边框是红色和蓝色重叠的效果，如下：
建议：在聚焦时，改变输入框的边框颜色。代码参考：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0 -
王嘉炜
提问者
2019-12-10
修改了一下，现在可以吗
0 -
王嘉炜
提问者
2019-12-10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>习题</title>
</head>
<body>
<input type="text" value=""><span></span>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
//此处写代码
$(document).ready(function(){
$('input').focus(function(){
$('span').html("请输入用户名").css({'color':'black'});
});
$('input').blur(function(){
if($(this).val()==""){
$('span').text("用户名不能为空").css({'color':'red'});}
else{
$('span').text("正确").css({'color':'green'});
}
});
});
</script>
</body>
</html>
0
相似问题