一个简单的基于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>缺陷:如果输入内容恰好是默认值则当输入框失去焦点时内容会清空。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。