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 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
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 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
python flask安装和命令详解
2019/04/02 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
使用Python封装excel操作指南
2021/01/29 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
车辆维修工自我评价怎么写
2013/09/20 职场文书
教师师德反思材料
2014/02/15 职场文书
房产公证委托书范本
2014/09/20 职场文书
分居协议书范本
2014/11/03 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
Python 正则模块详情
2021/11/02 Python
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript