Chrome瀏覽器中的jquery焦點/提交表演奇怪

-2

其實（在網站上）我有一個窗體在一個框中。
因此，不要耗盡那個盒子中的有限位置，只有當輸入（textarea，select，too）被集中時，聯繫表纔會彈出完整的大小。Chrome瀏覽器中的jquery焦點/提交表演奇怪

當提交按鈕被擊中時，AJAX請求被觸發。
在Firefox下工作一切都很棒。但在Chrome中：

當我點擊提交按鈕時，表單會恢復到其通常的大小，並且沒有AJAX-Request被觸發。

請隨時通過你的自我檢查出來：
http://jsfiddle.net/uUgaZ/

的實際工作中所涉及代碼零件：
JS

$('#helpkontakt').submit(function(){ 
    alert('ON MY WAY!'); 
}); 
$("#helpkontakt textarea, input, select").focus(function() { 
    $("#helpkontakt").css("height", "auto"); 
}); 
$("#helpkontakt textarea, input, select, #submit").focusout(function() { 
    $("#helpkontakt").css("height", "200px"); 
});

HTML

<form action="" accept-charset="utf-8" role="application" class="ym-form ym-columnar clearfix" method="post" enctype="application/x-www-form-urlencoded" id="helpkontakt" style="height: 200px;"> 
    <div class="ym-fbox-text"> 
     <input type="text" placeholder="Ihr Name" class="full" value="Max Mustermann" id="name"name="name">  
    </div> 
    <div class="ym-fbox-text"> 
     <input type="text" placeholder="Ihre Email" class="full" value="[email protected]" id="email" name="email"> 
    </div> 
    <div class="ym-fbox-text"> 
     <input type="text" placeholder="Telefonnr. für Rückruf" class="full" value="" id="tel" name="tel"> 
    </div> 
    <div class="ym-fbox-select"> 
     <select class="full" id="topic" name="topic">  
      <option label="Ideenvorschlag" value="Ideenvorschlag">Ideenvorschlag</option>  
      <option label="Verbesserungsvorschlag" value="Verbesserungsvorschlag">Verbesserungsvorschlag</option>  
      <option label="Fehlermeldung" value="Fehlermeldung">Fehlermeldung</option> 
     </select> 
    </div> 
    <div class="ym-fbox-msg"> 
     <textarea cols="80" rows="24" placeholder="[Die erste Zeile ist für den Betreff]                 Ab hier ihre Nachricht" class="full" id="nachricht" name="nachricht"></textarea> 
    </div> 
    <div style="clear: both;"> 
     <input type="hidden" id="hiddenTyp" value="Ausschluss Kriterien für Artikel" name="hiddenTyp">    
    </div> 
    <div style="margin: 0; padding: 0 1.5em 0 0;" class="ym-fbox-button"> 
     <input type="submit" class="submit" value="Absenden" id="submit" name="submit"> 
    </div> 
</form>

來源

2013-07-17 M. Hirn

代碼需要到這裏來，不存在。 – isherwood

好的，現在代碼也可以在這裏使用。 –

您可以提交按鈕完全點擊之前，您事件的內容功能正在運行，則可以解決這個問題是這樣的。 http://jsfiddle.net/uUgaZ/2/

基本上，我加了這一點：

var submitClicked = false; 
$('#submit').on("mousedown", function() { 
    submitClicked = true; 
}).on("mouseup", function() { 
    submitClicked = false; 
});

並修改了focusout是這樣的：

$("#helpkontakt textarea, input, select, #submit").focusout(function() { 
    if(!submitClicked) { 
     $("#helpkontakt").css("height", "200px"); 
    } 
});

所以如果focusout是因爲鼠標是向下提交按鈕，它不會執行。這不會導致focusout執行中的暫停，並且它不會要求用戶點擊某個速度（在該暫停內發生）。

來源

2013-07-17 18:00:56 smerny

我認爲如果我們真的很現實，這個解決方案比user1s更清潔。所以我會檢查這是最終接受的答案。謝謝smerny，我想我也愛你:) –

另一種解決方法：將focusout（）轉換爲函數並創建一個調用函數的取消按鈕。 – RozzA

那麼，這是因爲，當您嘗試點擊按鈕時，它會將焦點向外聚焦，焦點輸出事件被觸發並且按鈕被隱藏。

要解決這個問題，你可以這樣做。

$("#helpkontakt textarea, input, select, #submit").focusout(function() { 
setTimeout(function(){ 
$("#helpkontakt").css("height", "200px"); 
} ,100); 
});

Demo

來源

2013-07-17 17:55:24 user1

哦，老兄，我猜我愛你;） –

這不會工作，如果用戶不點擊非常快 – smerny

@MichaelHirn很高興我可以幫助。代碼中的「100」以毫秒爲單位。你可以隨意增加或減少。 – user1

只需將你的聚焦功能內容包裝到setTimeout中就可以了。

這應該很好。提交時我收到了警報。希望這可以幫助。

http://jsfiddle.net/uUgaZ/3/

$("#helpkontakt textarea, input, select").focusout(function() { 
    setTimeout(function(){ 
     $("#helpkontakt").css("height", "200px"); 
    },500); 
});

來源

2013-07-17 18:04:26 nmynarcik

user1已於9分鐘前發佈此解決方案。 – smerny

Chrome瀏覽器中的jquery焦點/提交表演奇怪

回答

相關問題