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 操作select与option(示例讲解)
Dec 20 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
JavaScript实现移动端拖动元素
Nov 24 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利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
17个Python小技巧分享
2015/01/23 Python
Python tkinter label 更新方法
2018/10/11 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
为什么需要版本控制
2016/10/28 面试题
公司活动邀请函
2014/01/24 职场文书
喝酒检查书范文
2014/02/23 职场文书
贷款承诺书范文
2014/05/19 职场文书
公司踏青活动方案
2014/08/16 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
员工给公司的建议书
2019/06/24 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书