页面输入框提示功能实现

来源：互联网发布：年报数据分析编辑：程序博客网时间：2024/04/28 08:31

如果浏览器支持HTML5，则直接

<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