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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
angular实现商品筛选功能
Feb 01 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 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学习笔记之面向对象编程
2012/12/29 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
PHP数据过滤的方法
2013/10/30 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
javascript静态的url如何传递
2007/05/03 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
jQuery each和js forEach用法比较
2019/02/27 jQuery
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python占位符输入方式实例
2019/05/27 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python实现LRU热点缓存及原理
2019/10/29 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
解决python3输入的坑——input()
2020/12/05 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
教学器材管理制度
2014/01/26 职场文书
合伙协议书范本
2014/04/21 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
早安问候语大全
2015/11/10 职场文书
学校教代会开幕词
2016/03/04 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP