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 相关文章推荐
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
js简单抽奖代码
Jan 16 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
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 版本]
2007/03/20 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
Javascript - HTML的request类
2007/01/09 Javascript
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
优秀大学生自荐信
2014/06/09 职场文书
培训科主任岗位职责
2014/08/08 职场文书
五年级学生期末评语
2014/12/26 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
上课迟到检讨书
2015/05/06 职场文书
学校计划生育责任书
2015/05/09 职场文书
学校隐患排查制度
2015/08/05 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技