Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 Jquery实现获取焦点、失去焦点的代码

Jquery实现获取焦点、失去焦点的代码

发布时间:2015-10-12   编辑:www.jquerycn.cn
为大家介绍如何用Jquery实现获取焦点与失去焦点的功能,正在研究Jquery的朋友,可以考虑参考下本文的介绍,一定会有所收获的。

要求:
1)、input失去焦点和获得焦点
2)、鼠标在搜索框中点击的时候里面的文字就消失了。

1、js代码:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input失去焦点和获得焦点jquery焦点事件插件-www.jbxue.com</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>

2、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!') } }) </script>

希望以上代码对大家有所帮助,更多Jquery 教程,敬请随时关注脚本学堂,专心为您每一天!

您可能感兴趣的文章:
Jquery实现获取焦点、失去焦点的代码
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
jQuery限制只能输入数字与失去焦点获取焦点
文本框获得焦点与失去焦点实现代码
js文本框获得或失去焦点时变色的代码
js实现页面加载时获取input文本框焦点
如何使用html5的Page Visibility API来实现获取焦点js事件
Jquery显示、隐藏元素以及添加删除样式
jquery点击页面任何区域实现鼠标焦点十字效果
JQuery之focus函数使用介绍

[关闭]