如何點擊在文本框輸入之外單擊時隱藏的鏈接？

Question

我有一個窗體中的文本框輸入; 當我點擊它時，它旁邊會出現一個鏈接。當我在文字輸入框外單擊時，鏈接被隱藏。

我有這樣的代碼，改變文本框輸入字段的風格，隱藏鏈接：

$('#txtbox').blur(function(){ 
$('#txtbox').removeClass('active'); 
$('#txtbox').addClass('passive'); 
$('#link').hide(); 
}); 

我希望能夠點擊鏈接，但是當我點擊的地方outsite文本框中，鏈接被隱藏。

當我點擊它時，鏈接仍然可見，但是當我點擊文本框外部並且當我沒有點擊鏈接時，它也會隱藏起來。

Answer 1

試試這個。

$(function(){ 
    $(document).click(function(){ 
     $('#link').hide(); 
    }); 
    $('#link').click(function(e){ 
     e.stopPropagation(); 
     //Do other stuff on click of link here 
    }); 
    $('#txtbox').blur(function(){ 
     $('#txtbox').removeClass('active').addClass('passive'); 
    }).focus(function(e){ 
     $('#txtbox').addClass('active').removeClass('passive'); 
     $('#link').show(); 
    }).click(function(e){ 
     e.stopPropagation(); 
    }); 
}); 

Demo

Answer 2

有兩種解決方案，您的問題

1 :)使用淡出/慢隱藏

$('#link').fadeOut(); 

或

$('#link').hide('slow'); 

2 :)使用的setTimeout（）

setTimeout(function() { $('#link').hide('slow'); }, 1000); 

Answer 3

我想你可能包括一個onchange功能。 http://forum.jquery.com/topic/jquery-change-trigger-and-onchange-event-in-input-box除此之外，搜索OnChange會給你很多想法。