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 ...
随机推荐
- HDOJ 2212 DFS
Problem Description A DFS(digital factorial sum) number is found by summing the factorial of every d ...
- HDOJ1002题A + B Problem II，2个大数相加
Problem Description I have a very simple problem for you. Given two integers A and B, your job is to ...
- SWMM代码移植到64位平台
在32位平台上运行SWMM模型,当节点数量到达60万以上的时候,模型运行占用内存接近1.85G的时候就会因为内存不够而无法计算.这种情况还是单独运行SWMM.exe的时候出现,如果采用SWMM.DLL ...
- Java正则表达式(1)
String类的三个内建正则表达式工具: 1.matches()方法 示例:检查一个句子是否以大写字母开头,以句号结尾 public static boolean checkFormat(String ...
- [转载+整理]JVM性能调优----JVM架构
JVM的总体结构参考如下两图:
- CentOS添加swap分区
在多个VPS上尝试. 1.进入目录 cd /var/ 2.获取要增加的SWAP文件块(这里以1GB为例) dd if=/dev/zero of=swapfile bs=1024 count=10383 ...
- zabbix2.2.3 VMware Vsphere exsi监控配置步骤
zabbix2.2.3 VMware Vsphere exsi监控配置步骤, 1,添加监控主机 2,添加聚集macro;{$PASSWORD} = yoodo.com{$URL} = http://i ...
- <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库
触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...
- hdu1558--并查集+判断线段相交
简单的计算几何题,判断两线段是否相交.将相交的两线段使用并查集归到一类中.查询时输出线段对应集合中元素的个数. #include<stdio.h> struct Point{ double ...
- C#将数据以XML格式写入Excel
本文转载:http://www.cnblogs.com/eflylab/archive/2008/09/21/1295580.html c#将数据导入Excel另类方法 今天公司突然给个Excel模版 ...