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文本框中,加入 ...
随机推荐
- 通过Nginx反向代理实现IP分流
通过Nginx做反向代理来实现分流,以减轻服务器的负载和压力是比较常见的一种服务器部署架构.本文将分享一个如何根据来路IP来进行分流的方法. 根据特定IP来实现分流 将IP地址的最后一段最后一位为0或 ...
- Spark源码分析 – DAGScheduler
DAGScheduler的架构其实非常简单, 1. eventQueue, 所有需要DAGScheduler处理的事情都需要往eventQueue中发送event 2. eventLoop Threa ...
- SpringCloud 入门
1. 入门概述 SpringBoot专注于快速方便的开发单个个体微服务; SpringCloud:关注全局的微服务协调治理框架,它将SpringBoot开发的一个个单体微服务整合并管理起来, 为各个微 ...
- Appium+python移动端自动化测试-python库及pycharm安装（二）
一.安装python库 安装python库有很多种方法,如pip安装.源文件安装.运行包安装,但我们最常用的就是使用pip进行安装 Appium+python做移动端的自动化测试,所需要安装以下pyt ...
- django高级之爬虫基础
目录: 爬虫原理 requests模块 beautifulsoup模块 爬虫自动登陆示例 一.爬虫原理 Python非常适合用来开发网页爬虫,理由如下:1.抓取网页本身的接口相比与其他静态编程语言,如 ...
- linux使用nohup命令后台运行程序
在linux服务器上搭建web服务器,用ssh客户端登陆后使用./startservice.sh脚本启动服务,但是当ssh断开连接后起的服务也会停掉. 这时可以用nohup ./startservic ...
- Selenium+Python学习之一
刚入门selenium+Python,实验成功之后,记录一下过程. 首先是在知乎上面看到一个关于selenium+python的示例,于是自己便尝试搭建环境上手实验. 按照作者的代码敲一遍之后执行,竟 ...
- jQuery实现复选框 全选、反选、全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- cpu-》内存-》磁盘
cpu相当于计算机大脑负责计算以及发送执行命令:内存相当于人的记忆是临时存储:磁盘相当于笔记本,负责永久存储数据: 当系统需要调用硬盘当中的数据时,会将硬盘数据读入内存供cpu进行处理.cpu只会读取 ...
- The Air Jordan 4 Oreo Remastered would be re-released in 2015
May be the Jordan 4 Oreo probably the most anticipated pair among the remastered Jordans for 2015? W ...