利用JavaScript的事件来实现，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<input type="text" onfocus="fun()" id="input" onblur="fun1()">
</body>
<script>
function fun() {
var input = document.getElementById('input');
input.placeholder = "请输入你的姓名";
}
function fun1() {
var input = document.getElementById('input');
if (!onkeydown){
input.placeholder = "用户名不能为空";
input.style.border = "1px solid red";
}
if (input.value != ''){
input.style.border = "1px solid #a9a9a9";
}
}
</script>
</html>
当输入框获得焦点就执行fun()函数，fun()函数用了使用Id查找的方法，设置行内的placeholder为”请输入你的姓名“
#####当输入框失去焦点就执行fun1()函数，fun1()函数如果用户没有按下键盘就输出”用户名不能为空“，如果``标签内的值不为空，就设置边框线为默认颜色