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


Posted in Javascript onApril 21, 2013

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

相关js代码:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>input失去焦点和获得焦点jquery焦点事件插件 - 懒人建站</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
//focusblur 
jQuery.focusblur = function(focusid) { 
var focusblurid = $(focusid); 
var defval = focusblurid.val(); 
focusblurid.focus(function(){ 
var thisval = $(this).val(); 
if(thisval==defval){ 
$(this).val(""); 
} 
}); 
focusblurid.blur(function(){ 
var thisval = $(this).val(); 
if(thisval==""){ 
$(this).val(defval); 
} 
}); 
}; 
/*下面是调用方法*/ 
$.focusblur("#searchkey"); 
}); 
</script> 
</head> 
<body> 
<form action="" method="post"> 
<input name="" type="text" value="输入搜索关键词" id="searchkey"/> 
<input name="" type="submit" id="searchbtn" value="搜索"/> 
</form> 
<p>input失去焦点和获得焦点jquery焦点事件插件,<br/><strong style="color:#F00">鼠标在搜索框中点击的时候里面的文字就消失了</strong>。</p> 
</body> 
</html>

jquery获取和失去焦点事件
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('#username').focus(function ()//得到教室时触发的时间 
{ 
$('#username').val(''); 
}) 
$('#username').blur(function () 失去焦点时触发的时间 
{ 
if ($('#username').val() == 'marry') { 
$('#q').text('用户名已存在!') 
} 
else { $('#q').text('ok!') } 
})
Javascript 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
js常用DOM方法详解
Feb 04 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
vue实现可拖拽的dialog弹框
May 13 Vue.js
jQuery获取注册信息并提示实现代码
Apr 21 #Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 #Javascript
jQuery模拟超链接点击效果代码
Apr 21 #Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 #Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 #Javascript
jQuery弹出(alert)select选择的值
Apr 21 #Javascript
jQuery登陆判断简单实现代码
Apr 21 #Javascript
You might like
php 全局变量范围分析
2009/08/07 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
vue使用video.js进行视频播放功能
2019/07/18 Javascript
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
Python入门之后再看点什么好?
2018/03/05 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
对Python实现累加函数的方法详解
2019/01/23 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
猫咪家具:CatsPlay
2018/11/03 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
求职简历自荐信
2013/10/20 职场文书
连锁经营管理专业大学生求职信
2013/10/30 职场文书
初一新生军训方案
2014/05/22 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
2014年会计工作总结
2014/11/27 职场文书
先进党支部事迹材料
2014/12/24 职场文书
施工现场安全管理制度
2015/08/05 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python