效果展示：
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
//获取元素对象
var input = document.querySelector('input');
//注册事件 获得焦点事件 onfocus
input.onfocus = function() {
if (input.value === '手机') {
input.value = '';
}
//如果获得焦点就让字体颜色变深
input.style.color='#333';
}
//注册事件 失去焦点事件 onblur
input.onblur = function() {
if (input.value==='') {
input.value='手机';
}
//如果失去焦点就让字体颜色还原
input.style.color='#999';
}
</script>
</body>
</html>