首先看效果

默认状态下

获取焦点状态下

什么也没输入，离开

有输入离开

输入默认值离开

代码

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Insert title here</title>

     <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

     <script type="text/javascript">

         //jQuery的页面加载完成时触发的事件

         $(document).ready(function(){

             $("input[type='text']").on("blur focus",function(){

                 var defaultvalue = $(this).attr("defaultvalue");

                 //判断是否获取焦点

                 if($(this).is(":focus")){

                     //把输入框里面的文字颜色变为黑色

                     $(this).css("color", "#000");

                     //如果之前的内容是默认值，那么清空

                     if($(this).val() == defaultvalue){

                         $(this).val("");

                     }

                 }else{//失去焦点

                     //判断内容是空的或默认值

                     if($(this).val() == "" || $(this).val() == defaultvalue){

                         //设置为默认值

                         $(this).val(defaultvalue);

                         //文字颜色设置为灰色

                         $(this).css("color", "#999");

                     }else{

                         //文字设置为黑色

                         $(this).css("color", "#000");

                     }

                 }

             });

         });

     </script>

 </head>

 <body>

     <a href="">刷新</a>

     <input type="text" id="button1" value="请输入账号" defaultvalue="请输入账号" style="color:#999"/>

     <input type="text" id="button2" value="请输入手机号" defaultvalue="请输入手机号" style="color:#999"/>

 </body>

 </html>

jQuery实现输入框提示，当获取焦点时提示消失，当失去焦点时内容为空则显示提示，否则保留输入信息的更多相关文章

  1. input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈 大家可以看效果图的搜索输入框, ...

  2. Android ClearEditText：输入用户名、密码错误时整体删除及输入为空时候晃动提示

    package com.lixu.clearedittext; import android.app.Activity; import android.os.Bundle; import androi ...

  3. 【五】jquery之事件（focus事件与blur事件）[提示语的出现及消失时机]

    例题:当鼠标移动到某个文本框时,提示语消失. 当失去焦点时,如果该文本框有内容,保存内容.没有内容,则恢复最初的提示语句 <!DOCTYPE html> <html> < ...

  4. 关于Jmeter测试移动端应用时提示非法登录，不是合法的登录设备时的解决办法

    当Jmeter测试移动端应用时提示非法登录,不是合法的登录设备时的解决办法:只需要在jmeter的http信息头管理器中配置相应的设备信息,可通过抓包工具得到:即头信息Header中的Miscella ...

  5. jquery mobile 输入框无边框

    现在移动开发为主流的时代,少不了使用jquery mobile.但是偶然应项目要求需要把input输入框做成无边框的,不是特别容易的事,网上找了很多都没有一种靠谱的解决方案,只能自食其力了. < ...

  6. jquery注冊文本框获取焦点清空,失去焦点赋值

    在我们开发过程中特别是用户注冊时会有一个效果.就是文本框获取焦点清空提示,假设用户没有输入信息失去焦点赋值上我们的提示语 <html> <head> <meta http ...

  7. ASP.NET 使用AJAX让GridView的数据行显示提示框（ToolTip）

    介绍ASP.NET AJAX可以使你的web应用程序具有更丰富的功能和更多的用户响应. 本文中,我将演示如何通过ASP.NET AJAX的帮助,给像GridView这样的数据绑定控件的数据行增加pop ...

  8. 火狐firefox提示“内容编码错误 无法显示您尝试查看的页面，因为它使用了无效或者不支持的压缩格式。”

    火狐firefox浏览器打开网也是时提示“内容编码错误 无法显示您尝试查看的页面,因为它使用了无效或者不支持的压缩格式.” 今早一来打开用PHPCMS做的网站时就提示这个错误,用其他浏览器打开提示的是 ...

  9. 【O】VSS 2005上传PDF文件之后，打开提示文件损坏或者内容为空

    问题: VSS 2005上传PDF文件之后,打开提示文件损坏或者内容为空: 解决方式: 在vss的客户端的tools-option中,file type选项卡里,在binary file文本框中,加入 ...

随机推荐

  1. MapReduce学习笔记

    一.MapReduce概述 MapReduce 是 Hadoop 的核心组成, 是专用于进行数据计算的,是一种分布式计算模型.由Google提出,主要用于搜索领域,解决海量数据的计算问题. MapRe ...

  2. foo ?

    我们经常看到一些基础教程,面试题中经经常使用foo来命名,甚至有时候我们也会用过,可是你是否又知道foo是什么意思?(实际上,知道不知道又不会对你编码有不论什么影响~) 从编程黑马的王轶男的话来解释, ...

  3. MySQLdb使用批量插入executemany方法插入mysql

    python的MySQLdb库可以使用批量操作executemany,进行多行插入. 比如向user表(username,salt,pwd)插入数据,具体的sql语句如下: sql = 'INSERT ...

  4. 新建虚拟机与本机ping不通（一招解决）

    初始新建虚拟机或者复制虚拟机后,发现虚拟机能ping通内外网,但是本机无法ping通虚拟机,xshell也无法连接虚拟机 这时候就很头疼了,因为要上传很多文件到虚拟机上面 解决办法: 1.关闭虚拟机后 ...

  5. 深入了解SQL Tuning Advisor（转载）

    1.前言:一直以来SQL调优都是DBA比较费力的技术活,而且很多DBA如果没有从事过开发的工作,那么调优更是一项头疼的工作,即使是SQL调优很厉害的高手,在SQL调优的过程中也要不停的分析执行计划.加 ...

  6. kettle配置命名参数

    bat 调度文件如下 cd D:/Program Files/kettle700/data-integrationKitchen.bat /rep repository /dir /TEST /job ...

  7. B-、B+、B*树

    B-树:多路搜索树,每个结点存储M/2到M个关键字,非叶子结点存储指向关键字范围的子结点:所有关键字在整颗树中出现,且只出现一次,非叶子结点可以命中: B+树:在B-树基础上,为叶子结点增加链表指针, ...

  8. 史上最有魄力公司！20亿主要用于团队建设，要在上海做出一家BAT之外的互联网公司

    在去年的创业大军里,有一家公司显得很特别——微鲸科技,背靠华人文化,联合阿里巴巴.腾讯和央广,天使轮就高达20亿,是被誉为互联网电视领域的豪华创业团队. 在上市不到半年的时间里,旗下发布的55吋和43 ...

  9. boost implicit_cast

    在stackoverflow上看到这个帖子, 于是发现了boost::implicit_cast这个小东西. 先来看看这段代码: struct top {}; struct mid_a : top { ...

  10. Mac OS OpenVpN 连接设置(转)

    下文介绍Mac OS连接使用OpenVPN方法教程,使用的软件是免费开源的Tunnelblick,当然也有其它连接软件,比如Viscosity,不过这个是付费的,还是前面的用的多. 1.下载安装Tun ...