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文本框中,加入 ...
随机推荐
- python学习笔记（五）— 内置函数
我们常用的‘’int,str,dict,input,print,type,len‘’都属于内置函数 print(all([1,2,3,4]))#判断可迭代的对象里面的值是否都为真 print(any( ...
- Linux 超级用户和普通用户切换命令
默认登录的是普通用户权限显示$符 tree@ubuntu:/usr$ 从普通用户切换超级用户权限: sudo su tree@ubuntu:/usr$ sudo su 输入密码 [sudo] pass ...
- Linux 最常用的20条命令
1.cd命令 这是一个非常基本,也是大家经常需要使用的命令,它用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径.如: cd /root/Docements # 切 ...
- Google：移动端搜索正式上线移动友好标签
Google移动端搜索正式上线“Mobile-Friendly”(移动友好)标签,并宣布如果卖家网站上没有移动友好标签或者错误地设置移动友好标签,那么卖家的网站将被降级. Google表示目前常见的智 ...
- JsonObject没有fromObject、idea引入maven有红线没依赖、JsonObject maven 依赖包
目录: 1.JsonObject maven 依赖包 2.idea引入maven有红线,没依赖 3.JsonObject没有fromObject \\\\\\\\\\\\\\\\\\\\\\\ 1.J ...
- vue工程权限怎么配置？
vue工程权限怎么配置? router.beforeEach((to, from, next) => { }):方法的to参数能拿到router设置的对象信息,如: { path: " ...
- spark[源码]-sparkContext概述
SparkContext概述 sparkContext是所有的spark应用程序的发动机引擎,就是说你想要运行spark程序就必须创建一个,不然就没的玩了.sparkContext负责初始化很多东西, ...
- JSON 转 对象
Json对象与Json字符串的转化.JSON字符串与Java对象的转换 一.Json对象与Json字符串的转化 1.jQuery插件支持的转换方式: $.parseJSON( jsonstr ); ...
- python 利用正则构建一个计算器
该计算器主要分为四个模块: weclome_func函数用来进入界面获取表达式,并判断表达式是否正确,然后返回表达式: add_sub函数用来进行加减运算,如果有多个加减运算,会递归,最后返回对应的值 ...
- WebMagic 爬虫框架
官方网站[http://webmagic.io/](http://webmagic.io/) >webmagic是一个开源的Java垂直爬虫框架,目标是简化爬虫的开发流程,让开发者专注于逻辑功能 ...