jQuery焦點/表單模糊，而不是單個輸入

當用戶單擊窗體中的任何輸入時，它將被聚焦。當用戶從任何輸入中單擊表單時，它都會模糊不清，但是，在表單本身的輸入之間切換之間，模糊不會被觸發。

這樣的事情，我們正在尋找這樣的基本結構：

<form> 
<input ... /> 
<input ... /> 
<input ... /> 
</form>

如此反覆，可以說我點擊任何輸入形式，我們知道的形式集中。接下來，當用戶點擊任何輸入時，僅當我們在表單外單擊時纔會觸發模糊。

我以前問過這個問題，並且好心收到了關於如何在表單中的最後一個輸入字段模糊時實現模糊效果的輸入，而不是輸入列表中的任何元素。

謝謝，馬克·安德森

來源

2011-02-19 Mark Anderson

，當你輸入之間的互聯事件的順序：

Click on input1: input1 focus 

    Clickb on input2: input1 blur 
        input2 focus 

    Click outside: input2 blur

當輸入失去焦點，你需要檢查形式的收益中的一些其他元素焦點。或者，你可以簡單地檢查有源元件還是在表單中：

$('form').on('focusout', function(event) { 
    setTimeout(function() { 
     if (!event.delegateTarget.contains(document.activeElement)) { 
      console.log('Form blur'); 
     } 
    }, 0); 
});

JSFiddle

注意，形式不模糊的提交，所以你可能需要添加一個提交處理程序，如果你想在模糊和提交上做同樣的事情。

還要注意使用setTimeout，它是必需的，因爲當一個元素即將失去焦點blur和focusout事件被髮出，但並沒有失去它。

來源

2011-02-19 06:58:40

這完美的作品。謝謝！ – 2011-02-19 16:33:04

單擊「提交」按鈕時似乎無法工作，但按預期方式工作。 – Wireblue 2014-07-10 05:41:04

你可以做這樣的事情：

var check; 

$('form input').focus(function() 
    { 
    clearInterval(check); // remove setinterval if any 
    // do something because the form is being used 
    }); 

$('form input').blur(function() 
{ 
    check = setInterval(function() 
    { 
     // do something because the form is not being used 
    },500); // half-second delay 
});

這不是最性感的解決方案，但對於如果0.5秒後出現在你的形式沒有重點檢查。希望這可以幫助。

來源

2011-02-19 06:53:01 TNC

會$('form').focusin()/focusout()不工作？

http://api.jquery.com/focusout/

來源

2011-02-19 07:00:49 Hailwood

這是同樣的基本思想是阿列克謝的，但jQuery的1.7+和，至少在我看來，有點更具可讀性，因爲它保持了相同的處理程序中的範圍的一切：

$("#myform").on("focusout focusin", "input", function(e){ 
     if (e.type == "focusout") { 
      $("#myform").attr("form-blur-timeout", window.setTimeout(function(){ 
       console.log("you've left the form!");//do stuff here 
      }, 100)); 
     } else { 
      window.clearTimeout($("#myform").attr("form-blur-timeout")); 
     } 
    });

享受:)

來源

2012-03-01 12:55:46 drpitman

jQuery焦點/表單模糊，而不是單個輸入

回答

相關問題