jquery获取焦点和失去焦点事件代码

2014-02-07  来源:本站原创  分类:jquery  人气:22 

鼠标在搜索框中点击的时候里面的文字就消失了,经常会用到搜索框的获得焦点和失去焦点的事件,接下来介绍一下具体代码,感兴趣的朋友额可以参考下

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获取焦点和失去焦点事件代码 2014-02-07

    鼠标在搜索框中点击的时候里面的文字就消失了,经常会用到搜索框的获得焦点和失去焦点的事件,接下来介绍一下具体代码,感兴趣的朋友额可以参考下 input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调用一下就OK 了 相关js代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head&

  • js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome) 2015-03-22

    本文讲一下js实现兼容IE6/7/8,firefox,chrome浏览器的回车和鼠标焦点事件的代码. 文本框: <input type="text" onkeydown="keydownsearch(event)" /> js代码: 复制代码 代码如下: function keydownsearch(evt) { evt = (evt) ? evt : ((window.event) ? window.event : "") keyC

  • jquery多浏览器捕捉回车事件代码 2013-12-18

    最近我们网站做一个合作项目要求在页面中捕捉回车事件,经过好多测试找到这个 $(document).keydown(function(event) { if (event.keyCode == 13) { $('form').each(function() { //你的要运行的代码 }); } }); 但是在opera中还是不行,技穷,一气之下把回车事件给屏蔽了 <form id="Form1" runat="server" onsubmit="ret

  • jquery dialog键盘事件代码 2014-01-31

    jquery dialog键盘事件代码,检测回车等事件的触发问题. 在dilog的open事件中 添加如下代码段 $("#dlgSearch").dialog({ autoOpen: false, bgiframe: true, width: 600, //height: 225, modal: true, resizable: false, open: function() { //jquery之dialog的键盘事件(输入完毕回车检索) $(this).bind("key

  • jquery 查找select ,并触发事件的实现代码 2014-06-07

    项目中,用jquery 查找select ,并触发事件. 记一笔.关键代码,需要的朋友可以参考下. var count=$("#drpCity option").length; //查找城市 for(var i=0;i<count;i++){ var vTmp=$("#drpCity").get(0).options[i].value; if($.trim(vTmp)==vDpoizone){ $("#drpCity").get(0).op

  • 基于jquery的网站幻灯片切换效果焦点图代码 2014-09-03

    一款大气的jQ网站幻灯片切换效果焦点图代码,有需要了解习的朋友可进入参考,这款jQuery网站幻灯片切换效果焦点图非常大气,要是网站首页应用此款效果,必定是蓬荜生辉啊 导入jquery代码 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script src="js/jquery-i

  • jquery中交替点击事件的实现代码 2014-09-05

    这篇文章主要介绍了jquery中交替点击事件的实现代码,需要的朋友可以参考下 $('#clickId').toggle( function(){$('#divId').hide();}, function(){$('#divId').show();} ); toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能

  • 使用JS或jQuery模拟鼠标点击a标签事件代码 2015-01-31

    这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById("alink").cl

  • jQuery实现回车键(Enter)切换文本框焦点的代码实例 2015-02-21

    这篇文章主要介绍了jQuery实现回车键(Enter)切换文本框焦点的代码实例,需要的朋友可以参考下 以下是实现方法: <script src="http://yige.org/static/js/j.js"></script> jQuery(function () { jQuery('input:text:first').focus();//直接定位到当前页面的第一个文本框 var $inp = jQuery('input:text');//所有文本框 $in

  • jquery下div 的resize事件示例代码 2014-11-17

    这篇文章主要介绍了某位大神写的jquery下div 的resize事件,需要的朋友可以参考下 这是某位大神写的jquery下div 的resize事件. //resize of div (function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout", j = "resize", d = j + "-special-event&quo

  • jquery文本框中的事件应用以输入邮箱为例 2014-08-20

    这篇文章主要介绍了jquery文本框中的事件应用以输入邮箱为例,需要的朋友可以参考下 文本框中的事件应用:以输入邮箱为例,如图: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • jQuery 文本框得失焦点的简单实例 2015-01-20

    本篇文章主要是对jQuery 文本框得失焦点的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 版本一 css代码部分: .focus { border: 1px solid #f00; background: #fcc; } 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc html代码部分: 复制代码 代码如下: <body> <form action="" method="post" id="regF

  • 了解jQuery技巧来提高你的代码 2014-01-21

    jQuery之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用,是因为它上手和使用相当简单,而且为我们提供了一些人都不知道的相当棒的特性. jQuery之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用,是因为它上手和使用相当简单,而且为我们提供了一些人都不知道的相当棒的特性.我认为jQuery的大多数用户更趋向于使用jQuery插件来解决面临的难题,这通常是明智的选择.但是当插件相对于你的需求有一定缺陷的时候,你也许更应该想办法自己来解决,下面来看看这些实用的jQuery技巧,

  • jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果 2015-02-18

    最近把jquery中的dom操作和jquery中的事件和动画的方法都大体测了一下.本来想细细的把每个方法都写出来介绍下 但感觉这样写很没意思. jquery的优势就是简单的代码就能带来更好的用户体验. 所以就找几个我感觉实用的例子,拿出来介绍下.顺带把其中用到的操作和事件介绍下. html代码: <input type="text" id="address" value="请输入邮箱地址"/> jquery代码: $(document

  • DIV焦点事件详解 --[focus和tabIndex]​ - 自由人 2013-05-19

    添加 tabindex='-1' 属性: 默认:获取不到焦点事件(blur) <div class="wl-product" id="wl-product"></div> 可以获取焦点事件(blur) <div class="wl-product" id="wl-product" tabindex='-1'></div> 具体详解: 先看:W3C关于onfocus的部分 The

  • jQuery技巧来提高你的代码质量 2014-09-04

    3.从jquery.org读取jQuery最新版本 你可以使用这句代码读取jQuery的最新版本的代码文件. <script src="http://code.jquery.com/jquery-latest.js"></script> 4.存储数据 这个data方法能让你自己明明数据的参数,更语义更灵活,你可以在页面上的任何元素存储数据信息.这个方法的经典应用是给input域一个默认值,然后在聚焦的时候清空它: <form id="testfo

  • javascript新建标签,判断键盘输入,以及判断焦点(示例代码) 2013-10-09

    这篇文章主要介绍了javascript新建标签,判断键盘输入,以及判断焦点(示例代码).需要的朋友可以过来参考下,希望对大家有所帮助 如下所示: function saomiao(event,n) { var code=0; code=event.keyCode;//监听键盘输入事件 if(code=='13')//如果键盘输入回车键 { if(n>0)//开始判断参数 { if(document.getElementById('logisticsno').value=='') { alert(

  • jQuery的图片滑块焦点图插件整理推荐 2013-10-18

    本文给大家整理了9款基于jQuery的图片滑块焦点图插件,效果都非常炫酷,演示和下载地址都给大家整理好了,有需要的小伙伴直接拿走吧,不用跟我客气^_^ 1.jQuery实现的右侧选项卡焦点图片轮播动画 jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击,是一段不错的焦点图切换代码. 在线演示 源码下载 2.jquery实现的网页缩略图大纲可滑动显示动态 query实现的网页缩略图大纲可滑动显示动态特效源码,是一款拥有网页大纲的缩略图显示的

  • jquery中dom操作和事件的实例学习 下拉框应用 2014-01-16

    jquery中dom操作和事件的实例学习 下拉框应用实现代码,需要的朋友可以参考下. 今天这个demo是有关下拉框的. <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <option value="1">选项1</opt

  • JQuery给元素绑定click事件多次执行的解决方法 2014-03-29

    这篇文章主要介绍了JQuery给元素绑定click事件多次执行的解决方法,需要的朋友可以参考下 原绑定方法: $("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: 复制代码 代码如下: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新c