Jquery使用Id获取焦点和失去焦点有2种方法

先用第一种(val()=="空"):

  

 <div>
<input type="text" id="address" value="请输入邮箱地址" />
<input type="text" id="password" value="请输入邮箱密码" />
<input type="button" value="登录" />
</div> <script type="text/javascript">
$("#address").focus(function () { //focus获取鼠标焦点时,如果输入框的值为 "请输入邮箱地址" ,则将输入框中的值清空
var txt_value = $(this).val(); //获取地址文本框的值
if (txt_value == "请输入邮箱地址")
{
$(this).val("");
}
});
$("#address").blur(function () { //blur失去鼠标焦点时,如果输入框的值为空,则将输入框中的值为 "请输入邮箱地址"
var txt_value = $(this).val(); //获取地址文本框的值
if (txt_value == "") {
$(this).val("请输入邮箱地址");
}
}); $("#password").focus(function () { //focus获取鼠标焦点时,如果输入框的值为 "请输入邮箱密码" ,则将输入框中的值清空
var txt_value = $(this).val(); //获取地址文本框的值
if (txt_value == "请输入邮箱密码") {
$(this).val("");
}
});
$("#password").blur(function () { //blur失去鼠标焦点时,如果输入框的值为空,则将输入框中的值为 "请输入邮箱密码"
var txt_value = $(this).val(); //获取地址文本框的值
if (txt_value == "") {
$(this).val("请输入邮箱密码");
}
});
</script>

这是第二种(defaultValue):

 <div>
<input type="text" id="address" value="请输入邮箱地址" />
<input type="text" id="password" value="请输入邮箱密码" />
<input type="button" value="登录" />
</div> <script type="text/javascript">
//还可以使用表单元素的defaultValue属性来实现同样的功能
$("#address").focus(function () {
var txt_value = $(this).val();
if (txt_value == this.defaultValue) { //this指向当前的文本框,this.defaultValue 就是当前文本框的默认值
$(this).val("");
}
});
$("#address").blur(function () {
var txt_value = $(this).val();
if (txt_value =="") {
$(this).val(this.defaultValue);
}
}); $("#password").focus(function () {
var txt_value = $(this).val();
if (txt_value == this.defaultValue) {
$(this).val("");
}
});
$("#password").blur(function () {
var txt_value = $(this).val();
if (txt_value == "") {
$(this).val(this.defaultValue);
}
});
</script>

Jquery使用Id获取焦点和失去焦点的更多相关文章

  1. JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点

    今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...

  2. 基于jQuery的网站首页宽屏焦点图幻灯片

    今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  3. jQuery的ID选择器失效问题

    jQuery的ID选择器,在同一项目别的文件中一切正常: 在当前页面,jQuery的其它功能(如:$(document).ready(function(){  alert("ok" ...

  4. jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换

    首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  5. jquery通过id和class取值

    一.Jquery通过id获取Input文本框value值 二.Jquery通过id获取文本内容(1) 三.Jquery通过id获取文本内容(2) 四.Jquey通过class获取文本内容 (注:Jqu ...

  6. jquery获取焦点和失去焦点事件代码

    input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调 ...

  7. jquery注册文本框获取焦点清空,失去焦点赋值的简单实例

    在我们开发过程中特别是用户注册时会有一个效果,就是文本框获取焦点清空提示,如果用户没有输入信息失去焦点赋值上我们的提示语.   <html> <head> <meta h ...

  8. jquery注冊文本框获取焦点清空,失去焦点赋值

    在我们开发过程中特别是用户注冊时会有一个效果.就是文本框获取焦点清空提示,假设用户没有输入信息失去焦点赋值上我们的提示语 <html> <head> <meta http ...

  9. jquery获取焦点和失去焦点

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 内核格式化(C++)

    参考<C++ Primer Plus>P788 iostream族支持 程序 与 终端 之间的I/O fstream族支持 程序 与 文件 之间的I/O sstream族支持 程序 与 s ...

  2. SSH免密码远程登录Linux

    1. 有A,B两台机(Linux/unix), 要想从A用ssh远程登录到B上(假设各自的IP,A:192.168.100:B:192.168.1.104). 2. 在A机上,用“ssh-keygen ...

  3. day 41 数据库初学习

    前情提要: 数据库初识别 一:数据库的介绍 https://github.com/Endless-Clould/homework/blob/master/student_system.sql 数据再这 ...

  4. Python “ValueError: incomplete format” print(“a%” % ”)

    解决python打印%号和%format输出问题 >>> print('%s' %'1') 1 >>> print('%s%' %'1') Traceback (m ...

  5. 【learning】 单调队列与单调栈用法详解

    1.单调栈 单调栈是指一个栈内部的元素具有严格单调性的一种数据结构,分为单调递增栈和单调递减栈. 其具有以下两个性质: 1,满足栈底到栈顶的元素具有严格单调性. 2,满足栈的先进后出特性,越靠近栈顶的 ...

  6. OS之内存管理 ---基本的内存管理策略(二)

    分段 基本方法 分段就是基于用户视图的内存管理方案.逻辑地址空间是由一组段构成的,每个段都有名称和长度.地址指定了段名称和段内偏移.因此用户通过两个量来指定地址:段名称和段偏移. 为了简单,进行对段的 ...

  7. Backing Up and Restoring HBase Data

    There are two strategies for backing up HBase:1> Backing it up with a full cluster shutdown2> ...

  8. (转) Rabbitmq学习笔记

    详见原文: http://blog.csdn.net/shatty/article/details/9529463 Rabbitmq学习笔记

  9. 探索DatePicker新用法

    很少用DatePicker,项目需要用到DatePicker,再用时发现跟以前有些变化,重新简单梳理一下DatePicker的用法. 先上效果图: 首先是xml文件的用法: 以前是用android:s ...

  10. Android 开发工具类 23_getImage

    pathText = "http://192.168.1.100:8080/ServerForPicture/wangjialin.jpg" import java.io.Inpu ...