<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
#box { width: 300px; height:40px; margin: 100px auto; }
#myInp { background:url(img/left.jpg) no-repeat; width: 206px; height: 30px; border: none; padding: 5px; color: #ccc; font-size: 16px; }
input { float:left; outline:none; }
</style>
</head>
<body>
<div id="box">
<input type="text" id="myInp" value="请输入内容"><input type="image" src="img/right.jpg">
</div>
</body>
<script type="text/javascript">
var myInp = document.getElementById('myInp');
myInp.onfocus = function(){//在获取焦点的时候 我们让文本清空 并且文字变为黑色
//伪代码：产品经理告诉我： 文字是”请输入内容“的时候 我们才执行清空的操作
if(myInp.value == '请输入内容'){
myInp.value = '';
myInp.style.color = '#000';
}
}
myInp.onblur = function(){//离开的时候 我们要让输入框中的文字恢复成“请输入内容” 并且让文字变为ccc
//产品经理又说：在离开的时候 如果文字是空的时候 我们才让文本框恢复成"请输入内容"
if(myInp.value == ''){
myInp.value = '请输入内容';
myInp.style.color = '#ccc';
}
}
</script>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
#box { width: 300px; height:40px; margin: 100px auto; }
#myInp { background:url(img/left.jpg) no-repeat; width: 206px; height: 30px; border: none; padding: 5px; color: #ccc; font-size: 16px; }
input { float:left; outline:none; }
</style>
</head>
<body>
<div id="box">
<input type="text" id="myInp" value="请输入内容"><input type="image" src="img/right.jpg">
</div>
</body>
<script type="text/javascript">
var myInp = document.getElementById('myInp');
myInp.onfocus = function(){//在获取焦点的时候 我们让文本清空 并且文字变为黑色
//伪代码：产品经理告诉我： 文字是”请输入内容“的时候 我们才执行清空的操作
if(myInp.value == '请输入内容'){
myInp.value = '';
myInp.style.color = '#000';
}
}
myInp.onblur = function(){//离开的时候 我们要让输入框中的文字恢复成“请输入内容” 并且让文字变为ccc
//产品经理又说：在离开的时候 如果文字是空的时候 我们才让文本框恢复成"请输入内容"
if(myInp.value == ''){
myInp.value = '请输入内容';
myInp.style.color = '#ccc';
}
}
</script>
</html>
2197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
