jQuery实现输入框提示，当获取焦点时提示消失，当失去焦点时内容为空则显示提示，否则保留输入信息
首先看效果
默认状态下
获取焦点状态下
什么也没输入，离开
有输入离开
输入默认值离开
代码
<!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实现输入框提示，当获取焦点时提示消失，当失去焦点时内容为空则显示提示，否则保留输入信息的更多相关文章
- input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈 大家可以看效果图的搜索输入框, ...
- Android ClearEditText：输入用户名、密码错误时整体删除及输入为空时候晃动提示
package com.lixu.clearedittext; import android.app.Activity; import android.os.Bundle; import androi ...
- 【五】jquery之事件（focus事件与blur事件）[提示语的出现及消失时机]
例题:当鼠标移动到某个文本框时,提示语消失. 当失去焦点时,如果该文本框有内容,保存内容.没有内容,则恢复最初的提示语句 <!DOCTYPE html> <html> < ...
- 关于Jmeter测试移动端应用时提示非法登录，不是合法的登录设备时的解决办法
当Jmeter测试移动端应用时提示非法登录,不是合法的登录设备时的解决办法:只需要在jmeter的http信息头管理器中配置相应的设备信息,可通过抓包工具得到:即头信息Header中的Miscella ...
- jquery mobile 输入框无边框
现在移动开发为主流的时代,少不了使用jquery mobile.但是偶然应项目要求需要把input输入框做成无边框的,不是特别容易的事,网上找了很多都没有一种靠谱的解决方案,只能自食其力了. < ...
- jquery注冊文本框获取焦点清空,失去焦点赋值
在我们开发过程中特别是用户注冊时会有一个效果.就是文本框获取焦点清空提示,假设用户没有输入信息失去焦点赋值上我们的提示语 <html> <head> <meta http ...
- ASP.NET 使用AJAX让GridView的数据行显示提示框（ToolTip）
介绍ASP.NET AJAX可以使你的web应用程序具有更丰富的功能和更多的用户响应. 本文中,我将演示如何通过ASP.NET AJAX的帮助,给像GridView这样的数据绑定控件的数据行增加pop ...
- 火狐firefox提示“内容编码错误 无法显示您尝试查看的页面，因为它使用了无效或者不支持的压缩格式。”
火狐firefox浏览器打开网也是时提示“内容编码错误 无法显示您尝试查看的页面,因为它使用了无效或者不支持的压缩格式.” 今早一来打开用PHPCMS做的网站时就提示这个错误,用其他浏览器打开提示的是 ...
- 【O】VSS 2005上传PDF文件之后，打开提示文件损坏或者内容为空
问题: VSS 2005上传PDF文件之后,打开提示文件损坏或者内容为空: 解决方式: 在vss的客户端的tools-option中,file type选项卡里,在binary file文本框中,加入 ...
随机推荐
- Apache Kafka源码分析 – Log Management
LogManager LogManager会管理broker上所有的logs(在一个log目录下),一个topic的一个partition对应于一个log(一个log子目录)首先loadLogs会加载 ...
- Should You Build Your Own Backtester?
By Michael Halls-Moore on August 2nd, 2016 This post relates to a talk I gave in April at QuantCon 2 ...
- post 传递参数中包含 html 代码解决办法，js加密，.net解密
今天遇到一个问题,就是用post方式传递参数,程序在vs中完美调试,但是在iis中,就无法运行了,显示传递的参数获取不到,报错了,查看浏览器请求情况,错误500,服务器内部错误,当时第一想法是接收方式 ...
- git 常用文件目录介绍
生成的RSA公钥与密钥目录: C:\Users\***\.ssh 系统配置文件路径 C:\ProgramData\Git\ C:\Program Files\Git\mingw64\etc 全 ...
- Using virtual lists
Download demo project - 15.7 Kb Contents Introduction Virtual list Creating a virtual list Add items ...
- Linux之Redis-redis哨兵集群详解
1.Sentinel 哨兵 Sentinel(哨兵)是Redis 的高可用性解决方案:由一个或多个Sentinel 实例 组成的Sentinel 系统可以监视任意多个主服务器,以及这些主服务器属下的所 ...
- git学习------>git-rev-parse命令初识
一.准备工作 第一步:在d盘git test目录下,新建工作区根目录demo,进入该目录后,执行git init创建版本库. DH207891+OuyangPeng@DH207891 MINGW32 ...
- webpack打包页面空白的解决方法
- python学习笔记（四）random 、json模块
一.模块简介 Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句. 导入模块 import module #导入模块 f ...
- 使用python操作文件实现购物车程序
使用python操作文件实现购物车程序 题目要求如下: 实现思路 始终维护一张字典,该字典里保存有用户账号密码,购物车记录等信息.在程序开始的时候读进来,程序结束的时候写回文件里去.在登录注册的部分, ...