鼠标在搜索框中点击的时候里面的文字就消失了，经常会用到搜索框的获得焦点和失去焦点的事件，接下来介绍一下具体代码，感兴趣的朋友额可以参考下
 
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!') } 
}) 

jquery得到焦点和失去焦点的更多相关文章

  1. jquery div 下拉框焦点事件

    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

  2. (三)在js(jquery)中获得文本框焦点和失去焦点的方法

    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...

  3. 键盘焦点和逻辑焦点（Logic Focus与Keyboard Focus ）

    键盘焦点和逻辑焦点(Logic Focus与Keyboard Focus ) 1.定义Keyboard Focus可以理解为物理焦点.就是整个桌面上可以响应键盘输入的地方,整个桌面在某个时刻只可能有一 ...

  4. PyQt（Python+Qt）学习随笔：键盘焦点和逻辑焦点（Logic Focus与Keyboard Focus ）

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 Qt中的焦点有键盘焦点和逻辑焦点(Logic Focus与Keyboard Focus )的区分,键 ...

  5. jQuery可自动播放动画焦点图插件Koala

    Koala是一款简单而实用的jQuery焦点图幻灯片插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放.该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图 ...

  6. jQuery 使得文本框获得焦点

      今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了, 可是 ...

  7. [转]jQuery.validate插件在失去焦点时执行验证代码

    转:http://my.oschina.net/enyo/blog/311566 关于 jquery.validate.js 表单验证插件如何在失去焦点时做验证.看手册后发现默认是在表单提交时执行验证 ...

  8. 基于jQuery的美食时间轴焦点图插件

    这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预 ...

  9. jQuery之文本框得失焦点

    版本一 css代码部分: .focus { border: 1px solid #f00; background: #fcc; } 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc h ...

随机推荐

  1. MFC 课程总结

    <基于MFC框架开发>马志国 1491989781 MFC课程的组成 1.1 MFC应用程序的组成部分.执行机制和执行流程(10.5天). 1.2 Windows平台上的数据库访问技术(1 ...

  2. ubuntu root用户登陆

    sudo vi /etc/lightdm/lightdm.conf   (如果没有该文件则创建,内容如下) [SeatDefaults] user-session=ubuntu greeter-ses ...

  3. 2.Linux文件IO编程

    2.1Linux文件IO概述 2.1.0POSIX规范 POSIX:(Portable Operating System Interface)可移植操作系统接口规范. 由IEEE制定,是为了提高UNI ...

  4. JavaScript 面向对象的编程（三） 类的继承

    定义父类和子类的继承关系 //声明父类 function SuperClass(){ this.superValue = true; } //为父类添加共有方法 SuperClass.prototyp ...

  5. 【网络流24题】最长k可重区间集问题（费用流）

    [网络流24题]最长k可重区间集问题 [问题分析] 最大权不相交路径问题,可以用最大费用最大流解决. [建模方法] 方法1 按左端点排序所有区间,把每个区间拆分看做两个顶点<i.a>< ...

  6. jquery转义字符之单引号

    jquery动态生成html,并且html中包含方法时,如 var varHtml = '<input type="button" value="点我删除" ...

  7. poj 2455

    题意:由一个点走到另一个点,中间的点可以重复到达,但边只能经过一次,问T条边不重复的路径里,最长的边的最小值. 分析:由于点是可以重用的,因此不必拆点.这道题有重边,而且重边都必须保留,因为点是可以重 ...

  8. 洛谷 P2683 小岛

    P2683 小岛 题目背景 西伯利亚北部的寒地,坐落着由 N 个小岛组成的岛屿群,我们把这些小岛依次编号为 1 到 N . 题目描述 起初,岛屿之间没有任何的航线.后来随着交通的发展,逐渐出现了一些连 ...

  9. Ubuntu 16.04安装WPS

    1.下载 http://community.wps.cn/download/ 根据需要对应版本进行下载deb包. 2.安装 sudo dpkg -i wps-office_10.1.0.5672~a2 ...

  10. jQuery.data() 存储数据

    jQuery.data() 的实现方式 jQuery.data() 的作用是为普通对象或 DOM Element 附加数据. 以下将分三个部分分析事实上现方式: 1. 用name和value为对象附加 ...