首先看效果

默认状态下

获取焦点状态下

什么也没输入，离开

有输入离开

输入默认值离开

代码

 <!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. Accuracy, Precision, Resolution & Sensitivity

    Instrument manufacturers usually supply specifications for their equipment that define its accuracy, ...

  2. JavaScript自定义函数

    js对象转成用&拼接的请求参数(转) var parseParam=function(param, key){ var paramStr=""; if(param inst ...

  3. Spring AOP和事务的相关陷阱

    1.前言 2.嵌套方法拦截失效 2.1 问题场景 2.2 解决方案 2.3 原因分析 2.3.1 原理 2.3.2 源代码分析 3.Spring事务在多线程环境下失效 3.1 问题场景 3.2 解决方 ...

  4. 关于Android项目隐藏标题栏的方法总结

    1.在代码中添加这么一行代码 this.requestWindowFeature(Window.FEATURE_NO_TITLE); 注意:这段代码需要写在setContentView()之前,否则会 ...

  5. Flask的配置与路由

    配置管理 flask中的配置文件是一个flask.config.Config对象(继承字典),默认配置为:    {        'DEBUG':                    get_de ...

  6. python与c语言交互应用实例

    1.python向c语言写数据 1) 先将接收端编译成一个共享链接库gcc/arm-linux-gnueabihf-gcc -o bluetooth_proxy.so -shared -fPIC bl ...

  7. C++学习笔记-类相关问题总结

    1.默认构造函数 默认构造函数要么没有参数,要么所有参数都有默认值.如果没有定义任何构造函数,编译器将自定义默认构造函数. 自动生成的默认的构造函数的作用: (1)使可以创建对象 (2)调用基类的默认 ...

  8. 关于safenetde 的明文 密文 数据 。这个数组使用 safenet的助手 产生的。

    关于safenetde 的明文 密文  数据  .这个数组使用 safenet的助手 产生的. 下图是生成的数组 例如: { 0x9B, 0xFD, 0xF5, 0xA6, 0xF5, 0x57, 0 ...

  9. python 之时间模块 time

    time模块可以用于格式化日期和时间,时间间隔是以秒为单位的浮点小数.每个时间戳都以自从1970年1月1日午夜(历元)经过了多长时间来表示. 下面是time模块常用的一些时间格式转换的函数.时间戳可以 ...

  10. 支持向量机SVM、优化问题、核函数

    1.介绍 它是一种二类分类模型,其基本模型定义为特征空间上的间隔最大的线性分类器,即支持向量机的学习策略便是间隔最大化,最终可转化为一个凸二次规划问题的求解. 2.求解过程 1.数据分类—SVM引入 ...