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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
npm全局环境变量配置详解
Dec 15 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
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
给水工程专业毕业生自荐信
2014/01/28 职场文书
四年级数学教学反思
2014/02/02 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
关于读书的活动方案
2014/08/14 职场文书
运动与健康自我评价
2015/03/09 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers