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焦点/提交表演奇怪

回答

相关问题