首先看效果

默认状态下

获取焦点状态下

什么也没输入，离开

有输入离开

输入默认值离开

代码

 <!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. iass,pass,cass,sass,vm,container

    分布式存储hdfs 大文件,swift 对象存贮. 为七牛的CDN系统目前大部分还不是自建的,采用的是整合其它CDN的方式做的.也就是说出了七牛的文件分发使用的是网宿和蓝汛的老牌CDN的分发节点,自身 ...

  2. python and 我爱自然语言处理

    曾经因为NLTK的 缘故开始学习Python,之后渐渐成为我工作中的第一辅助脚本语言,虽然开发语言是C/C++,但平时的很多文本数据处理任务都交给了Python.离 开腾讯创业后,第一个作品课程图谱也 ...

  3. Django 框架搭建入门案例

    1. 什么是 web 框架 对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端; # 示例: import socket def handle_re ...

  4. django将数据库中数据直接传到html

    1.当然,前提是建立和配置好django数据库啦~ 2.在python后台函数中引入需要的表 #要读取home这个APP下的models.py文件,引入其中的Student_message_unedi ...

  5. Elven Postman---hdu5444（二叉树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5444  有一个序列,由这个序列可以画出一颗二叉树(每个节点的左边(W)都比它大,右边(E)都比它小), ...

  6. Apache mahout 源码阅读笔记--DataModel之FileDataModel

    要做推荐,用户行为数据是基础. 用户行为数据有哪些字段呢? mahout的DataModel支持,用户ID,ItemID是必须的,偏好值(用户对当前Item的评分),时间戳 这四个字段 {@code ...

  7. JSON.parse和JSON.stringify

    var json_arr = [];                //parse用于从一个字符串中解析出json对象;stringify()用于从一个对象解析出字符串                 ...

  8. IT开发工程师的悲哀现状和可能前途

    IT开发工程师的悲哀现状和可能前途 本文所指的开发工程师,仅指程序开发人员和以数字电路开发为主的电子工程师.当你选择计算机或者电子.自控等专业进入大学时,你本来还是有机会从事其它行业的,可你毕业时执迷 ...

  9. send/receive h264/aac file/data by rtp/rtsp over udp/tcp

    一.安装一些必要的调试工具 1.vlc安装sudo apt-get install vlcsudo apt-get install vlc-nox 2.ffmpeg安装,带ffplay,ffplay依 ...

  10. Python 集合（set）的使用总结

    集合的特点:去重.无序,因此无法通过下标取值. 1. 定义集合 s = set() #定义空的集合 s2 = {'} # 不是key -value形式的话就是集合,不是字典 s3 ={'} print ...