实现H5中的placeholder功能

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<label for="">用户名:</label><input type="text" id="ipt">
	<script type="text/javascript">
		var ipt=document.getElementById('ipt');
		ipt.value="请输入用户名";
		ipt.style.color='gray';
		ipt.onclick=function(){
			if (this.value=="请输入用户名") {
				this.selectionStart=0;
				this.selectionEnd=0;
			}
		}
		ipt.onkeydown=function(){
			if (this.value=="请输入用户名") {
				this.value="";
				this.style.color='#000';
			}
		};
		ipt.onkeyup=function(){
			if (this.value.length==0) {
				this.value="请输入用户名";
				this.style.color='gray';
				this.selectionStart=0;
				this.selectionEnd=0;
			}
		}
</script>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_44606660/article/details/87779573