一个简单的基于jquery的表单输入提示案例

经常在网站会看到类似这样的特效,下面采用jQuery实现下。

思路很简单,用户名输入框获取焦点时判断是否为默认值,如果是则清空否则不清空。该输入框失去焦点时判断输入内容是否为空串或空格,如果是则清空否则不清空。

注:仅仅是个人思路。网站未必是采用这种方式实现的。

<form action="" method="post">
          <table id="tb">
              <tr>
                  <td>用户名</td>
                  <td>
                      <input type="text" value="输入用户名" name="user" id="user"/>
                  </td>
              </tr>
              <tr>
                  <td>密码</td>
                  <td>
                      <input type="password" name="pwd" id="pwd"/>
                  </td>
              </tr>
              <tr>
                  <td>
                      <input type="submit" value="登陆"/>
                  </td>
              </tr>
          </table>
      </form>
css代码:

<style type="text/css">
        #tb{
            width: 400px;
        }
        #user{
            color:gray;
        }
</style>
脚本:

$().ready(function()
        {
            var defaultValue = $("#user").val();
            $("#user").focus(function()//获取焦点时
            {
                $("#user").css("color","black");
                if($("#user").val() == defaultValue)
                    $("#user").val("");
            });
            $("#user").blur(function()//失去焦点时
            {
                if($.trim($("#user").val())=="")
                {
                    $("#user").val(defaultValue);
                    $("#user").css("color","gray");
                }
            });
            
        });
别忘了加上jquery开发框架:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
缺陷:如果输入内容恰好是默认值则当输入框失去焦点时内容会清空。



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。