鼠标在搜索框中点击的时候里面的文字就消失了,经常会用到搜索框的获得焦点和失去焦点的事件,接下来介绍一下具体代码,感兴趣的朋友额可以参考下
 
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. jQuery图片延迟加载插件jQuery.lazyload 的使用

    使用方法 引用jquery和jquery.lazyload.js到你的页面 1 2 <script src="jquery-1.11.0.min.js"></sc ...

  2. Python学习笔记(1)对象类型

    强制转换字符串函数str 如果我们求2的一百万次方是多少那么我们可以 print(2**1000000) 如果我们要求2的一百万次方有多少位那么我们可以用str函数强制转换成字符串然后len函数计算 ...

  3. 第九节:web爬虫之urllib(五)

    第四个模块 robotparser: 主要是用来识别网站的 robots.txt 文件,然后判断哪些网站可以爬,哪些网站不可以爬的,其实用的比较少.

  4. 2.6 访问 Shell 脚本的参数

        所谓的位置参数(positional parameters)指的也就是Shell脚本的命令行参数(command-line arguments).在Shell函数里,它们同时也可以是函数的参数 ...

  5. 1. Jenkins 入门使用

    1. 下载jenkins https://pkg.jenkins.io/redhat-stable/ sudo wget -O /etc/yum.repos.d/jenkins.repo https: ...

  6. free web rich code eidtor

    free web rich code eidtor https://i.cnblogs.com/Preferences.aspx tiny code-editor https://apps.tiny. ...

  7. Ajax提交post请求返回404错误

    最近使用ajax提交表单的时候,发现无法执行success函数,后台的代码也正常执行了,但是就是无法执行success函数,执行error函数,返回的错误代码时404.显然是找不到请求的url. 可是 ...

  8. 20180725利用pmm监控管理mysql

    转自:https://www.percona.com/doc/percona-monitoring-and-management/architecture.html 报警机制https://www.p ...

  9. HDU 1166敌兵布阵

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  10. 奇妙的滚动css+html

    <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> ...