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 API学Jquery 之三 筛选
Apr 09 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
javascript中Number的方法小结
Nov 21 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 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中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
srcElement表格样式
2006/09/03 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
理解python正则表达式
2016/01/15 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
python与字符编码问题
2019/05/24 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
广告学专业毕业生自荐信
2014/05/28 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
新员工试用期自我评价
2015/03/10 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
golang日志包logger的用法详解
2021/05/05 Golang