jQuery实现输入框提示，当获取焦点时提示消失，当失去焦点时内容为空则显示提示，否则保留输入信息...

最新推荐文章于 2019-06-04 17:02:58 发布

weixin_30472035

最新推荐文章于 2019-06-04 17:02:58 发布

阅读量2k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/xiaostudy/p/9562982.html

版权

首先看效果

默认状态下

获取焦点状态下

什么也没输入，离开

有输入离开

输入默认值离开

代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Insert title here</title>
 6     <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 7     <script type="text/javascript">
 8         //jQuery的页面加载完成时触发的事件
 9         $(document).ready(function(){
10             
11             $("input[type='text']").on("blur focus",function(){
12                 var defaultvalue = $(this).attr("defaultvalue");
13                 
14                 //判断是否获取焦点
15                 if($(this).is(":focus")){
16                     //把输入框里面的文字颜色变为黑色
17                     $(this).css("color", "#000");
18                     //如果之前的内容是默认值，那么清空
19                     if($(this).val() == defaultvalue){
20                         $(this).val("");
21                     }
22                 }else{//失去焦点
23                     //判断内容是空的或默认值
24                     if($(this).val() == "" || $(this).val() == defaultvalue){
25                         //设置为默认值
26                         $(this).val(defaultvalue);
27                         //文字颜色设置为灰色
28                         $(this).css("color", "#999");
29                     }else{
30                         //文字设置为黑色
31                         $(this).css("color", "#000");
32                     }
33                 }
34             });
35         });
36     </script>
37 </head>
38 <body>
39     <a href="">刷新</a>
40     <input type="text" id="button1" value="请输入账号" defaultvalue="请输入账号" style="color:#999"/>
41     <input type="text" id="button2" value="请输入手机号" defaultvalue="请输入手机号" style="color:#999"/>
42 </body>
43 </html>

转载于:https://www.cnblogs.com/xiaostudy/p/9562982.html

weixin_30472035

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现输入框提示，当获取焦点时提示消失，当失去焦点时内容为空则显示提示，否则保留输入信息...

首先看效果默认状态下获取焦点状态下什么也没输入，离开有输入离开输入默认值离开代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title he...
复制链接

扫一扫