隱藏div模糊或鼠標移出

嘗試隱藏div後失去焦點或模糊。我有一個簡單的表單，並通過觸摸或點擊（這是一個移動網站）專注於該領域，爲用戶提供一些指導。它正在按照我的意願進行演出，但我必須再次點擊該區域才能再次隱藏div。隱藏div模糊或鼠標移出

HTML：

<input type="text" id="usernameCL" name="usernameCL" placeholder="Create a Username" autocomplete="off" autocorrect="off" class="field_hints"/> 
<div id="usernameCL" class="tooltip_static" style="display:none"> This be my field hint</div>

這是我的其他領域使用提示1.6.4 JQ

jQuery函數：

$().ready(function() { 
    $('.field_hints').bind('focus', 
    function() 
    { 
     var field = this.id; 
     var div = $('.tooltip_static[id='+field+']'); 

     if(div.css('display') == 'none') 
     { 
     div.show(function() 
     { 
      div.slideUp("fast"); 
     }); 
     } 
     else 
     { 
     div.hide('blur'); 
     } 
    }); 
    });

這裏是一個小提琴： http://jsfiddle.net/LapPA/

任何人都知道如何獲得這可以隱藏模糊或鼠標移出？

來源

2013-02-04 isaac weathers

您需要綁定到blur事件的單獨處理程序。

例如，你可以做this：

$().ready(function() { 
    $('.field_hints').bind('focus', 
    function() 
    { 
     var field = this.id; 
     var div = $('.tooltip_static[id='+field+']'); 

     if(div.css('display') == 'none') 
     { 
     div.hide(function() 
     { 
      div.slideDown("fast"); 
     }); 
     } 
    }).bind('blur', 
     function() 
     { 
      var field = this.id; 
      var div = $('.tooltip_static[id='+field+']'); 
      div.hide(); 
     }); 
    });

來源

2013-02-04 20:52:33

這實際上工作得很好，並與iOS下一步按鈕形式。謝謝。 –

$('#myformid').on('blur', '.field_hints',function(){ 
    $(this).next('.tooltip_static').hide(); 
}); //replace #myformid with the id of your form

來源

2013-02-04 20:51:15 shubniggurath

首先，你必須使用相同的ID usernameCL兩個對象。不是很好。

您正在搜索的代碼：

var func = function() { 
    // We assume the id of the input tag to be #someid, and the tooltip div to be #someid_tooltip 
    var id = $(this).attr('id'); 
    $('#' + id + '_tooltip').fadeOut(); 
}; 

$('#usernameCL').bind('blur', func); 
$('#usernameCL').bind('mouseout', func);

難道是我搞砸了一個或兩個名字。

來源

2013-02-04 20:54:03

是的，這是我的不好。使用了錯誤的ID。我會改變它。基本上，如果你看到這個div是如何在我們的評論框下面打開的，那就是我想要完成的。 –

其實我也注意到了這一點，並想知道爲什麼它正在工作，因爲我正在重新使用該ID。我想我可以嘗試使用班級。 –

類應該用於爲多個標籤分配類似/相同的_traits_。使用它們進行識別並不是一個好主意（但是，如果你照顧，例如使用'$（this）.next（）'）的其他例子，它就可以工作。這就是id。 –

可以使用mouseleave事件：http://jsfiddle.net/4VUvD/

$().ready(function() { 
     $('.field_hints').bind('focus', function() { 
      var field = this.id; 
      var div = $('.tooltip_static[id='+field+']'); 
      div.slideDown("fast"); 
     }).bind('mouseleave', function(){ 
      $('.tooltip_static[id='+this.id+']').slideUp("fast"); 
     }); 
});

來源

2013-02-04 20:54:51 AvL

這很好。在iOS上使用「下一步」按鈕的一些問題，但假設我需要補償標籤。 –

隱藏div模糊或鼠標移出

回答

相關問題