jQuery之文本框得失焦点
版本一
css代码部分：
.focus {
border: 1px solid #f00;
background: #fcc;
}
当焦点获得时，添加focus样式，添加边框，并改背景色为#fcc
html代码部分：
<body>
<form action="" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text" />
</div>
<div>
<label for="pass">密码:</label>
<input id="pass" type="password" />
</div>
<div>
<label for="msg">详细信息:</label>
<textarea id="msg" rows="2" cols="20"></textarea>
</div>
</fieldset>
</form>
</body>
这里有两个input，一个textare框。
:input匹配 所有 input, textarea, select 和 button 元素。
jQuery代码部分：
<script type="text/javascript">
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
})
</script>
用:input匹配所有的input元素，当获取焦点时，就添加样式focus，通过$(this)自动识别当前的元素。focus()方法是获取焦点事件发生时执行的函数。blur()方法是失去焦点事件发生时执行的函数。
版本二：
有时候文本框里有默认的内容，作为提示信息，获取焦点后，要让它消失。可以做如下的改造：
<script type="text/javascript">
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
if($(this).val() ==this.defaultValue){
$(this).val("");
}
}).blur(function(){
$(this).removeClass("focus");
if ($(this).val() == '') {
$(this).val(this.defaultValue);
}
});
})
</script>
做个逻辑判断，如果值为默认值，就将文本框中的内容清空。
失去焦点，如果文本框中为空，也就是没有输入内容，就将值还设为默认值。
这是一个简单的逻辑。
jQuery之文本框得失焦点的更多相关文章
- jQuery 文本框得失焦点应用
一.文本框得失焦点一种是改变文本框的样式 得到焦点: 失去焦点: 二.文本框得失焦点另一种是改变文本框的值 得到焦点: 失去焦点: 三.jQ ...
- jQuery 使得文本框获得焦点
今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了, 可是 ...
- JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点
今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...
- JQuery初始加载时注册文本框失去焦点事件
在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });
- js/jquery获取文本框的值与改变文本框的值
我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...
- JQuery中文本框获取焦点
今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了, 可是当我 ...
- jquery获取文本框的内容
使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...
- jQuery清除文本框，内容并设置不可用
JQuery清除文本框,内容并设置不可用 如果是设置只读,则将disabled换成readonly function CleanText(textid) { $("#"+text ...
- 用Jquery控制文本框只能输入数字和字母
用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...
随机推荐
- Java Web中web.xml的作用
每一个javaWeb工程都有一个web.xml配置文件,那么他到底有什么作用呢?它是每一个web工程都必的必须的吗? web.xml文件是用来初始化工程配置信息的,比如说welcome页面,fil ...
- Hibernate（九）一对多双向关联映射
上次的博文Hibernate从入门到精通(八)一对多单向关联映射中,我们讲解了一下一对多单向映射的相关 内容,这次我们讲解一下一对多双向映射的相关内容. 一对多双向关联映射 一对多双向关联映 射,即在 ...
- Bzoj 2818: Gcd 莫比乌斯,分块,欧拉函数,线性筛
2818: Gcd Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 3241 Solved: 1437[Submit][Status][Discuss ...
- NTP服务器
server 1.cn.pool.ntp.org server 1.asia.pool.ntp.org server 0.asia.pool.ntp.org pool.ntp.org
- mysql使用mysqldump导出数据出错
mysqldump -hlocalhost -uroot -p123456 student_info jssypk > c:/databackup.sql 导出表结构 mysqldump - ...
- com.microsoft.sqlserver.jdbc.SQLServerException: 通过端口 1433 连接到主机 127.0.0.1 的 TCP/IP 连接失败。错误:“Connection refused: connect。请验证连接属性。确保 SQL Server 的实例正在主机上运行，且在此端口接受 TCP/IP 连接，还要确保防火墙没有阻止到此端口的 TCP 连接。”
检查SQL Server Configuration Manager 确定实例名为"SKYSQLEXPRESS"下的TCP/IP已经开启了: sql2014配置(系统为Window ...
- [置顶] UITableViewCell
UITableViewCellStyle: 四种Cell类型. UITableViewCellSeparatorStyle 分割线类型.(group三种,plain两种) UITableViewCel ...
- java对象数组的概述和使用
1 public class Student 2 { 3 // 成员变量 4 private String name; 5 private int age; 6 7 // 构造方法 8 public ...
- 关于MS office 180天后再次激活遇到的问题解决方法
遇到的问题: 再次点击miniKMS 激活软件激活失败 : 我也不知道这是为什么?后来我在同一目录重装了一次,点击的还是我以前的那个KSM激活软件,出现的错误还是一样的.于是我想可能是这个激活软件的 ...
- Android 颜色渲染(三) Shader颜色渲染
版权声明:本文为博主原创文章,未经博主允许不得转载. 相信看过在上一篇中提到的三篇文章后,大家已经对颜色处理方面有更深的体会. 之前讲到颜色渐变的效果, 具体怎么做呢,这就需要应用颜色渲染. 首先要介 ...