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. Android逆向-Android基础逆向7(内购干货集合)

    本文作者:MSTLab-EvilChen 0×00 前言 首先,本来想写NDK的,但是还是先把这个流程过一遍吧,这个流程是必不可少的.其次,RMB真的是一个好东西. 导航 由于本人为了节省时间,不想贴 ...

  2. Sysbench0.5初体验

    最近工作中需要测试数据库的OLTP的性能,参考了下MariaDB的benchmark中的测试脚本,发现脚本中已经使用了Sysbench-0.5,可以在这里https://launchpad.net/s ...

  3. webpack快速入门——CSS分离与图片路径处理

    1.在终端安装extract-text-webpack-plugin 2.引入插件 const extractTextPlugin = require("extract-text-webpa ...

  4. Android NDK开发Crash错误定位

    在Android开发中,程序Crash分三种情况:未捕获的异常.ANR(Application Not Responding)和闪退(NDK引发错误).其中未捕获的异常根据logcat打印的堆栈信息很 ...

  5. shell while-ssh

    Linux shell脚本使用while循环执行ssh的注意事项 浏览:86次 出处信息 如果要使用ssh批量登录到其它系统上操作时,我们会采用循环的方式去处理,那么这里存在一个巨大坑,你必须要小心了 ...

  6. spring定时任务的注解实现方式

    STEP 1:在spring配置文件中添加相应配置,以支持定时任务的注解实现 (一)在xml里加入task的命名空间 <!-- beans里添加:--> xmlns:task=" ...

  7. html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图

    之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面.采用html5+css3+Zepto+sw ...

  8. h5预订酒店项目|html5酒店模板|h5酒店webapp开发

    近几天尝试着使用html5+css3+swiper+jqUI+layerMobile等技术开发了一款仿携程.去哪儿.艺龙webapp酒店预订系统,页面图标统一使用iconfont,仿原生app右侧弹窗 ...

  9. hanlp的基本使用--python(自然语言处理)

    hanlp拥有:中文分词.命名实体识别.摘要关键字.依存句法分析.简繁拼音转换.智能推荐. 这里主要介绍一下hanlp的中文分词.命名实体识别.依存句法分析,这里就不介绍具体的hanlp的安装了,百度 ...

  10. 【C#小知识】C#中一些易混淆概念总结(五)---------深入解析C#继承

    目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 [C#小知识]C#中一些易混淆概念总结(二)--------构造函数,this关键字 ...