首先看效果

默认状态下

获取焦点状态下

什么也没输入，离开

有输入离开

输入默认值离开

代码

 <!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. Spark源码分析 – SchedulerBackend

    SchedulerBackend, 两个任务, 申请资源和task执行和管理 对于SparkDeploySchedulerBackend, 基于actor模式, 主要就是启动和管理两个actor De ...

  2. 用flask开发个人博客（4）—— flask中4种全局变量

    https://blog.csdn.net/hyman_c/article/details/53512109 一  current_app current_app代表当前的flask程序实例,使用时需 ...

  3. django高级应用（分页功能）

    django高级应用(分页功能) 1.原生分页应用 前端html代码 <!DOCTYPE html> <html lang="en"> <head&g ...

  4. LeetCode_Search in Rotated Sorted Array

    题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 ...

  5. 002-java语言基础

    一.安装卸载 卸载:控制面板 安装:下载对应版本 注意1.安装路径→尽量不要有空格和汉字 注意2.安装之后,jre可以不用安装,jdk中含有 二.环境变量 环境变量:理解,一些快捷路径.方便快速查找应 ...

  6. G729 详细使用文档

    https://tools.ietf.org/html/rfc4749 git://git.linphone.org/linphone-android.git http://stackoverflow ...

  7. windows平台tensorboard的配置及使用

    由于官网和其他教程里面都是以Linux为平台演示tensorboard使用的,而在Windows上与Linux上会有一些差别,因此我将学习的过程记录下来与大家分享(基于tensorflow1.2.1版 ...

  8. NAND flash学习所获----（Zac）

    Nand Falsh外围电路:peripheral circuit 1.Nand flash里至少有2个state Machine(controller),即2个主控. 一个主控:负责处理前端事情. ...

  9. HDU2425：Hiking Trip（简单bfs,优先队列实现）

    题目: 传送门 题意很简单就不解释了,水题一道. #include <iostream> #include <string.h> #include <stdio.h> ...

  10. C++学习笔记-隐式成员函数

    通过一个例子来复习C++操作符重载及隐式成员函数.MyString类模仿标准string类,简单的实现了构造一个字符串.字符串比较.取单个字符等功能.如下: #ifndef MYSTRING_H_ # ...