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 相关文章推荐
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
js日历功能对象
2012/01/12 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
对python多线程与global变量详解
2018/11/09 Python
Python中函数参数匹配模型详解
2019/06/09 Python
利用python实现AR教程
2019/11/20 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
英国家电直销:Appliances Direct
2016/09/22 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
XML文档面试题
2015/08/05 面试题
新党章心得体会
2014/09/04 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
公司年会主持词范文!
2019/05/07 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS