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 ...
随机推荐
- OC语言中类目，延展，协议
一.类目 指向已知的类中添加新方法,不破坏封装性.已知类可以是自定义的类和系统的类. 1.类目的实现和声明 建一个学生类,并增加类目 (1).声明(是在Student+Working.h中) 必须引入 ...
- java---Unicode-字符转换器
实现一个字符(包括汉字)的简单互相转换: package cn.hncu.gui2; import java.awt.Button; import java.awt.Color; import jav ...
- Bzoj 2763: [JLOI2011]飞行路线 拆点,分层图,最短路,SPFA
2763: [JLOI2011]飞行路线 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1694 Solved: 635[Submit][Statu ...
- SRM 386(1-250pt)
DIV1 250pt 题意:题意很难翻译....其实就是一个暴力...在看到有一个限制条件的范围为1-10的时候就该想到是暴力,我却半天没想到.... tag:brute-force // BEGIN ...
- Python 函数的参数知识汇总
函数搞不熟,后边就晕头转向了,在此重新归纳一下廖大神的函数教程,加深记忆 一.函数的参数分为: 位置参数 def power(x): # x 就是power(x)的一个位置参数,我们调用power(x ...
- 自己动手画一个HTML5的按钮
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 关于MS office 180天后再次激活遇到的问题解决方法
遇到的问题: 再次点击miniKMS 激活软件激活失败 : 我也不知道这是为什么?后来我在同一目录重装了一次,点击的还是我以前的那个KSM激活软件,出现的错误还是一样的.于是我想可能是这个激活软件的 ...
- SQL字符串处理函数大全
select语句中只能使用sql函数对字段进行操作(链接sql server),select 字段1 from 表1 where 字段1.IndexOf("云")=1;这条语句不对 ...
- Spring Data MongoDB example with Spring MVC 3.2
Spring Data MongoDB example with Spring MVC 3.2 Here is another example web application built with S ...
- [AngularJS + Webpack] Requiring CSS & Preprocessors
Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By ...