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 left,right,mid函数
Jun 10 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
Date对象格式化函数代码
Jul 17 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
JavaScript门面模式详解
Oct 19 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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计算上一个月的今天
2013/05/23 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
python实现红包裂变算法
2016/02/16 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
酒店销售经理岗位职责
2014/01/31 职场文书
军人违纪检讨书
2014/02/04 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
师德师风的心得体会
2014/09/02 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
疾病证明书
2015/06/19 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript