HTML表單自動隱藏，並且提交於模糊

我們有在常規的HTML元素顯示數據字段的接口設計，並且僅當用戶點擊在顯示元件上露出的輸入形式。HTML表單自動隱藏，並且提交於模糊

<div class="header-container"> 
    <header class="header-displayName"></header> 

    <form class="form" style="display: none;"> 
    <section><label>First Name</label> 
     <span><input type="text" class="form-input" placeholder="first name"></span></section> 
    <section><label>Last Name</label> 
     <span><input type="text" class="form-input" placeholder="last name"></span></section> 
     <div class="hidden-submit"><input type="submit" tabindex="-1"/></div> 
    </form> 
</div>

在上述情況下，用戶點擊標題元件，已在jquery的隱藏自身並顯示形式被佈線在。在按Enter鍵時，表單也會隱藏自身並顯示標題，同時發出Ajax請求以提交表單數據。

現在的問題是如何提升用戶體驗的下一個步驟，用戶黏合或點擊表單的到文件將有形式在其他地方實現它需要隱藏和提交如常。

我嘗試了表單的模糊事件，但後來認識到它僅僅是來自單個輸入元素的模糊事件的冒泡，因此導致表單隱藏/提交僅僅失去了firstName輸入的焦點;用戶沒有機會處理lastName輸入。當然，如果我在每個輸入字段上嘗試了stopPropagation（），則表單不會模糊，因爲它沒有自己的模糊事件。

我怎麼能可靠地捕獲在表單級別模糊事件？

爲了提供更多背景這個實現，它是一個可重用的UI組件，因此它是不是真的靜態放置在一個單頁文檔。他們甚至可能在同一份文件中多次出現。他們不應該在文檔級別進行任何可能會混淆其他組件的連線。此類表單中的所有字段也是可選的，因此在提交之前，不能指望填寫所有字段。

來源

2012-11-16 icelava

您可以將'document'上的'click'與表單元素中的'stopPropagation'結合使用。 – nrodic

只是在您的其他文本框爲空時，如果所有字段都填滿了內容，然後綁定文檔上的單擊事件以提交表單，則不提交表單。 – Jai

我編輯過的關於這些用戶界面的性質的更多背景背景。謝謝。 – icelava

研究發現，jQuery提供僞選擇器檢查「：聚焦」;這樣可以更輕鬆地偵聽表單級別的模糊，但是檢查是否有其他兄弟輸入元素在輕微延遲後才獲得焦點。

setTimeout(function(){ 
    if (!$('.form-input').is(':focus')) { 
    $('.form').submit(); 
    } 
}.bind(this), 10);

替代地選擇可以應用於「的形式輸入.FORM」或其他一些後代選擇，以覆蓋感興趣的輸入字段。

來源

2012-11-22 01:51:58 icelava

HTML表單自動隱藏，並且提交於模糊

回答

相關問題