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. Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了． 步骤: 先在htm中添加.error的css样 ...

  2. jquery之鼠标失去焦点事件

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. jquery $.extend()扩展插件获取焦点或失去焦点事件

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. jquery获取焦点和失去焦点

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. jquery实现输入框实时输入触发事件代码

    $('.aa').bind('input propertychange', function() { searchProductClassbyName(); }); function searchPr ...

  6. javascript 获取焦点和失去焦点事件

    利用传参的方式提高方法的复用性 这里涉及到JavaScript的字符串拼接操作 </tr> <<tr height="40px"> <td> ...

  7. Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示. 步骤: 先在htm中添加.error的css样式, 并在输入框中的dat ...

  8. jquery 触发/失去焦点事件例子详解

    触发焦点: $("Element").focus() 触发每一个匹配元素获得焦点事件. $("Element").focus(function) 事件会在获得焦 ...

  9. jQuery之绑定焦点事件（焦点事件失效）

    在使用jQuery绑定事件时,若某个事件不存在,则该事件后 绑定的事件均失效: 如图所示,若失去焦点事件checkEmail不存在, 会导致后面的事件checkMobile,和事件checkBirth ...

随机推荐

  1. CCF认证考试——折点计数

    描述:简单题 #include<iostream> using namespace std; int main() { ], n, count = ; cin >> n; ; ...

  2. 免费人脸识别APi

    今天对应一些免费的人脸识别的api 做了一下简单的对比,觉得百度开发出来的人脸识别接口还是最符合的我的要求,简单易用,容易上手. 据说百度的一些门禁也使用上了人脸识别的功能了,功能很强大,而且能识别出 ...

  3. Android OpenGL ES 开发（三）: OpenGL ES 定义形状

    在上篇文章,我们能够配置好基本的Android OpenGL 使用的环境.但是如果我们不了解OpenGL ES如何定义图像的一些基本知识就使用OpenGL ES进行绘图还是有点棘手的.所以能够在Ope ...

  4. IDEA上传项目至git

    今天来分享一下从idea上传项目至coding的过程. 本文基于windows系统. idea提供了很方便的控制git的界面化操作,除了安装git和一些必要的配置之外,用到命令行的地方会非常少. 1: ...

  5. 【NOIP2015提高组】信息传递

    https://www.luogu.org/problem/show?pid=2661 傻逼图论题,把我写成傻逼了. DFS找环,每个结点第二次访问时更新答案. 但是图会有几个连通块,所以要分开讨论. ...

  6. dock使用方法

    Docker 是一个开源项目,为开发者和系统管理员提供了一个开放的平台,在任何地方通过打包和运行应用程序作为一个轻量级的容器.Docker 在软件容器内自动部署应用程序.Docker 最开始由 Sol ...

  7. Python的列表

    1. Python的列表简介 1. 1 列表的定义 列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表的数据项不需要具有相同的类型.列表中的每个元素都分配一个数字 ,即它的 ...

  8. ABAP CDS Table Function介绍与示例

    Core data services(以下简称CDS)可以指两样东西,一个是HANA CDS,一个是ABAP CDS. 如我们所知,HANA CDS只支持HANA数据库,ABAP CDS理论上支持多种 ...

  9. iOS 力学动画生成器UIKit Dynamics 之碰撞效果解说

    UIKit Dynamic是iOS7 新增的一组类和方法.可赋予UIView逼真的行为和特征,不须要写动画效果那些繁琐的代码,让开发者可以轻松地改善应用的用户体验.一共同拥有6个可用于定制UIDyna ...

  10. C++windows内核编程笔记day09_day10,对话框和窗体基本控件等的使用

    //设置字体颜色 SetTextColor(hdc,RGB(255,0,0)); //窗体背景 //wce.hbrBackground=(HBRUSH)(COLOR_WINDOW+1); //wce. ...