Question

实际上（在网站上）我有一个盒子里的表格因此，不要耗尽该盒子中的有限位置，只有当输入（textarea，select）也被聚焦时，接触形式才会弹出其全部大小。

当提交按钮被点击时，AJAX请求被激活。
在Firefox下工作一切都很棒。但是在Chrome中：

当我点击提交按钮时，表单恢复到通常的大小，并且没有AJAX-Request被触发。

涉及的实施代码部分：
的 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="test@test.de" 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>

Answer 1

嗯，这是因为，当您尝试单击该按钮时，它会聚焦，并且会触发focusout事件并隐藏按钮。

要解决这个问题，你可以这样做。

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

Demo

Answer 2

在您完全点击提交按钮之前，您的聚焦功能正在运行，您可以像这样解决它。 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执行暂停，并且不需要用户单击某个速度（在该暂停内发生）。

Answer 3

简单地将焦点输出功能内容包装到setTimeout中就可以了。

这应该处理得很好。提交时我收到了警报。希望这会有所帮助。

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

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

Jquery焦点/提交在Chrome浏览器中表现得很奇怪

3 个答案: