2. 程式人生 > >jquery失去焦點與獲取焦點事件blur() focus()

jquery失去焦點與獲取焦點事件blur() focus()

阿新 • • 發佈：2019-01-17

對於元素的焦點事件，我們可以使用jQuery的焦點函式focus(),blur()。

focus()：得到焦點時使用，和javascript中的onfocus使用方法相同。

如：

 程式碼如下 複製程式碼

 $("p").focus(); 或$("p").focus(fn)

blur()：失去焦點時使用，和onblur一樣。

 如：

 程式碼如下 複製程式碼

$("p").blur(); 或$("p").blur(fn)

例

 程式碼如下 複製程式碼

<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>請在上面的輸入域中點選，使其獲得焦點，然後在輸入域外面點選，使其失去焦點。</p>
</body>


滑鼠在搜尋框中點選的時候裡面的文字就消失了。

 程式碼如下 複製程式碼

<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>

一個根據ajax值來判斷是顯示或隱藏div

 程式碼如下 複製程式碼

<tr>
    <td width='70' height='30' align='right'><span class="red">*</span> 手機：</td>
    <td width='198' align='center'><input name="tgmo" type="text" class="tcinp" id="tgmo" size="15"/></td>
    <td><span class="gray">用房樂網會員登入名可獲取5房樂幣
</span></td>
  </tr>


js


$(function(){
 
$('#tgmo').blur(function(){
 $.post('post.php?action=check',{'tgmo':$('tgmo').val()},function(data)
 {
  if( data==0 )
  {
   $('#sy_a').show();
   $('#autoregister').val(1);
  }
  else
  {
   $('#sy_a').hide();
   $('#autoregister').val(0);
  }
  
 });
})
  
});

相關推薦

jquery失去焦點與獲取焦點事件blur() focus()

對於元素的焦點事件，我們可以使用jQuery的焦點函式focus(),blur()。 focus()：得到焦點時使用，和javascript中的onfocus使用方法相同。 如：  程式碼如下 複製程式碼  $("p").focus(); 或$("p").focus(fn

jQuery實現輸入框獲取焦點和失去焦點

在使用者登陸的介面中，一般都需要使用者名稱和密碼才能登陸，這時為了增強使用者體驗，最好能在當前輸入框沒有獲取焦點時，提示輸入資訊，獲取焦點之後，提示資訊消失，文字框顯示的資訊為使用者輸入的資訊；同時在使用者沒有輸入資訊的情況下，或者滑鼠移開的情況下，提示資訊重新出現。 這時，使用者名稱和密碼區設定獲取焦點

html text失去焦點與得到焦點的事件

onclick="if(value=='your email address'){value=''}"  單擊的時候 onblur="if(value==''){value='your email address'}" 失去焦點的時候 onfocus="" 得到焦點的時候

使用jquery使input自動獲取焦點

最近在做畢業設計時一直沒能完善這個細節，想要通過點選選項卡後，自動獲取輸入框焦點，在網上查閱了很多資料終於踏破鐵鞋無膩處。 #（element）.focus（）能夠使元素獲取焦點或者設定元素觸發獲取焦點的事件。 博主講的原因是： 如果之前當前元素為隱藏或者未被建立，則需要延時。 按著

jquery實現input框獲取焦點

獲取表單焦點變色 //.login-form表單樣式類 //.item input輸入框父div // focus是要新增的樣式類 $(".login-form").on("foc

input輸入框獲取焦點、獲取焦點位置、焦點設定

使用按鈕進行文字資訊的修改和刪除,並從游標指定位置修改文字內容，不使用鍵盤的退格鍵。 <!doctype html> <html lang="en">  <head>   <meta charset="UTF-8">   &l

jquery中獲取焦點和失去焦點事件

jquery 焦點事件 <script src="../js/jquery-1.12.4.min.js"></script> <script> $(function(){ // 獲取焦點事件,不傳參 focus

jquery--blur()事件，在頁面載入時自動獲取焦點

jquery--blur()事件會在頁面載入時自動獲取焦點，應將onblur寫到html標籤中 <div class="inputbox"> <input type="text" name="" id="uPhone" placeholder="手機號" onblur="va

Jquery使用Id獲取焦點和失去焦點

　　　　Jquery使用Id獲取焦點和失去焦點有2種方法 先用第一種（val()=="空"）： 　　 <div> <input type="text" id="address" value="請輸入郵箱地址" /> <input t

EditText焦點的失去與獲取，Edittext常用監聽設定

專案中遇到EditText焦點的獲取與取消問題，查閱資料整理了一下，順便記錄下軟鍵盤的呼叫與隱藏與EditText常用的監聽器。 EditText焦點的獲取與取消 軟鍵盤的呼叫與隱藏 EditText常用監聽 EditText焦點的獲取與取消

jquery 失去焦點事件 （text文字框有焦點事件）

  點選滑鼠 後， 下拉框收縮 （此下拉框由上邊text文字框  和select 、增加商品分類 組成，不是純select程式碼 的下拉框） $(document).ready(function(){ $("#txtcon").blur(function(){

Unity3d 失去獲取焦點，暫停

焦點 目前在用tolua進行項目開發，C#與lua交互的部分消息使用了註冊監聽處理，監聽方法均放到Update方法裏面進行處理，問題在於失去焦點後Update方法將不繼續執行，這就導致了監聽方法未能及時調用。 例如：AB玩家進行紙牌遊戲，A接到電話並失去焦點，Update不執行導致消息未能及時

原生js實現placeholder 當獲取焦點時清空，失去焦點且為空時恢復

pan .get fun NPU 清空 element 失去 document 實現 <body> <input type="text" value="請輸入內容" id="text1" /> </body> <scri

判斷input文字框獲取焦點和失去焦點

<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>判斷input文字框

React native 的TextInput失去獲取焦點

<TextInput ref='first' underlineColorAndroid="transparent" autoFocus={firstFlag} editable={firstFlag}

自定義jqGrid編輯功能，當行獲取焦點時編輯，失去焦點時保存

rowkey table save 編輯功能 code com dpa ext turn 1 http://www.360doc.com/content/17/0719/15/9200790_672577533.shtml 2 /******************

dev中文字框等獲取焦點事件

<ClientSideEvents GotFocus="GotFocus" /> editContract.SetFocus()//設定文字框等的焦點 function GotFocus(s, e) {       &nbs

jq 鍵盤事件，點選鍵盤上的上鍵，input上一個獲取焦點，點選下鍵，input下一個獲取焦點

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script

Android TV 開發-listview(GridView)使用鍵盤獲取焦點時，選中上次失去焦點時的item，而不是就近的item

在電視上開發Android應用時，經常要做有二級選單的應用，例如： 但當我們按左鍵的時候，左邊listview的最近的item會被選中，即如下效果： 但是在電視上開發應用的時候，我們希望是上一次被選中的item重新被選中，即希望是“日期和時間”被重新選中。 為了實現這個

EditText獲取焦點和失去焦點

在android開發中，關於EditText自動獲取焦點彈出鍵盤，我們可能又是會有讓鍵盤自動彈出的需求，有時可能又會有不想讓鍵盤自動彈出的需求: 　　需求：EditText自動獲取焦點並彈出鍵盤，程式碼：   　　　　EditText.setFocusable(true); &