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 相关文章推荐
javascript在一段文字中的光标处插入其他文字
Aug 26 Javascript
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
js数组依据下标删除元素
Apr 14 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
js canvas实现五子棋小游戏
Jan 22 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 Undefined index的问题
2009/06/01 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
js form action动态修改方法
2008/11/04 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
Python作用域与名字空间原理详解
2020/03/21 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
简单租房协议书
2014/04/09 职场文书
一年级小学生评语
2014/04/22 职场文书
初二学习计划书范文
2014/04/27 职场文书
客房服务员岗位职责
2015/02/09 职场文书
小学安全教育主题班会
2015/08/12 职场文书
心得体会格式及范文
2016/01/25 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
导游词之无锡唐城
2019/12/12 职场文书
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis