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!') } })