<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type = "text/css">
input{
border: 2px #01f solid;
}
</style>
<script type = "text/javascript">
window.onload = function(){
input = document.getElementsByTagName('input')[0];
input.oninput = function(e){
console.log(this.value);
}
}
</script>
</head>
<body>
<input type = "text" value = "请输入用户名" style = "color:#999"
onfocus="if(this.value == '请输入用户名'){this.value = '' ;this.style.color='#424242'}"
onblur = "if(this.value == ''){this.value = '请输入用户名';this.style.color='#999'}">
</body>
</html>效果
