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文本框中,加入 ...
随机推荐
- 设计模式之Singleton模式
当程序运行时,有时会希望在程序中,只能存在一个实例,为了达到目的,所以设计了Singleton模式,即单例模式. 单例模式的特征: 想确保任何情况下只存在一个实例 想在程序上表现出只存在一个实例 示例 ...
- 适配器模式(Adapter Pattern)--不兼容结果的协调
定义:将一个接口转换成客户希望的另一个接口,使接口不兼容的那些类可以一起工作,其别名为包装器(Wrapper); 分类: 对象适配器:适配器与适配者之间是关联关系; 类适配器:适配器和适配者之间是继承 ...
- 【react读取文件】react发送GET请求读取静态文件
react中,使用发送请求的方式把static文件夹中的前端可访问的静态文件读取成字符串: 1.new request,需要用到getRequestHeaders组件 2.fetch获取respons ...
- 在setting中实现可拔插的插件功能实现
1.setting配置信息 在配置文件中通过对插件进行注释来实现可拔插,例如在配置中将其注释,则在使用此功能不起作用,注释取消后则可正常使用 # 可拔插的插件(plugins) PLUGINS_DIC ...
- 02-django查询
目录 (一)查询 1 .基本查询(等于.大于.包含字符.日期.字段比较.逻辑) 2 .关联查询(即为join查询)(一对多.多对多.一对一) 3 .聚合查询(统计查询) (二)关联对象(已知A表的 ...
- 3类数据库的联动：mysql、mongodb、redis
3类数据库的联动:mysql.mongodb.redis from pymysql import * from pymongo import * from redis import * class M ...
- java-mybaits-00401-Mapper-输入输出
Mapper.xml映射文件中定义了操作数据库的sql,每个sql是一个statement,映射文件是mybatis的核心. 1.parameterType(输入类型) 1.1.#{}与${} #{} ...
- python学习笔记(十)完善数据库操作
1.cur = coon.cursor(cursor=pymysql.cursors.DictCursor)的用法 建立游标,指定cursor类型返回的是字典,如果不指定类型,返回的是元组类型数据 i ...
- Oracle记录登录失败的触发器
前言:实现的功能主要是,oracle登录成功记录登录用户ip地址,登录失败记录登录失败ip地址 1,需要建立一个触发器记录登录成功的客户端用户的ip地址 大家都知道在v$session 中记录着客户端 ...
- sql中表级约束和列级约束
sql中表级约束和列级约束,在SQL SERVER中, (1) 对于基本表的约束分为列约束和表约束约束是限制用户输入到表中的数据的值的范围,一般分为列级约束与表级约束.列级约束有六种:主键Primar ...