<head>
<meta charset="UTF-8">
<title>mock-placeholder</title>
<style type="text/css">
.u-text{position: relative;}
.u-text label{position: absolute; top: 3px; left: 3px;}
</style>
</head>
<body>
<div id="u-text" class="u-text">
<input id="user" type="text" style="width:200px; height:20px;">
<label id="int" style="color:#aaa;">请输入</label>
</div>
<script type="text/javascript">
var uText = document.getElementById('u-text');
var uLabel = document.getElementById('int');
var user = document.getElementById('user');
function dispear (e) {
uLabel.style.display = 'none';
}
function apear (e) {
if(user.value == '')
uLabel.style.display = 'block';
}
user.addEventListener('input',dispear,false);
user.addEventListener('blur',apear,false)
</script>
</body>用CSS的user-select就可以实现了
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;