如果浏览器支持HTML5,则直接
具体可参考: http://www.hdwill.info/xhtml-css/html5-placeholder-text.html
<input id="Text1" type="text" placeholder="提示内容"/>
chorme和firefox都支持的,但ie9还是不支持。
可以用Javascript来实现:
<head runat="server">
<title>无标题页</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
});
</script>
<style type="text/css">
.placeholder { color: #aaa; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Text1" type="text" placeholder="提示内容"/>
<br />
<asp:TextBox ID="TextBox1" runat="server" placeholder="提示内容"></asp:TextBox>
</div>
</form>
</body>
</html>
具体可参考: http://www.hdwill.info/xhtml-css/html5-placeholder-text.html