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 相关文章推荐
浅说js变量
May 25 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
Vue Router中应用中间件的方法
Aug 06 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
Javascript实现打鼓效果
2021/01/29 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Python类的专用方法实例分析
2015/01/09 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
俄罗斯女装店:12storeez
2019/10/25 全球购物
二年级数学教学反思
2014/01/21 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL