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 相关文章推荐
jQuery1.6 使用方法二
Nov 23 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
js初始化验证实例详解
Nov 26 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
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使用百度天气接口示例
2014/04/22 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
简述Python中的面向对象编程的概念
2015/04/27 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
深入理解Python 多线程
2020/06/16 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
财务副总经理工作职责
2013/11/25 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
三问三解心得体会
2014/09/05 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
百年校庆感言
2015/08/01 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书