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 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
js常用DOM方法详解
Feb 04 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 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 Cookie的一个使用注意点
2008/11/08 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
JS 遮照层实现代码
2010/03/31 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
文秘专业个人求职信
2013/12/22 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
另类冲刺标语
2014/06/24 职场文书
2014年校长工作总结
2014/12/11 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
关于python中模块和重载的问题
2021/11/02 Python
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang