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文本框中,加入 ...
随机推荐
- ansible-puppet-saltstack---ITAMS
ansible http://www.cnblogs.com/ee900222/p/ansible.html http://ju.outofmemory.cn/entry/67581 http://w ...
- Ansible安装过程中常遇到的错误（FAQ）
1.安装完成后允许命令报错 Traceback (most recent call last): File , in <module> (runner, results) = cli.ru ...
- Android Studio 使用小技巧和快捷键
Android Studio 使用小技巧和快捷键 Alt+回车 导入包,自己主动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt ...
- 【Servlet】把文件写到Respond输出流里面供用户下载
本文区分于<[Jsp]把Java写到Respond输出流里面供用户下载>(点击打开链接)把原本该打印到控制台的内容,直接打印到一个文本文件txt中给用户下载. 实际上是<[Strut ...
- java组件学习15天
Linuxdocker redminegitlabnginxmavenkibanakafkaspringspring cloudLucene 搭建基本使用
- git获取远程仓库代码
首先在本地创建一个目录“ MyProject”,用来存放工程文件,git进入该文件夹,执行 git clone 远程项目MyCode地址 将代码克隆到本地然后进入“MyCode”文件夹下 cd MyC ...
- 汇编文件后缀.s与.S
转载:http://www.cnblogs.com/IamEasy_Man/archive/2011/08/10/2134212.html 一.大小写后缀的区别: .s: 汇编语言源程序;汇编 .S ...
- Way to MongoDB
1.MongoDB术语/概念:database,collection,document,field,indexSQL术语/概念:database,table,row,column,index 2.所有 ...
- 工作笔记——区块链POC
1.基础配置 安装SecureCRT 8.0链接到虚拟服务器,并配置docker 安装文件上传到服务器工具FileZilla
- Vim 我用的python相关插件
1. pydoc.vim(https://github.com/vim-scripts/pydoc.vim) 查找python文档. 使用方法: :Pydoc <keyword> ...