-2

实际上（在网站上）我有一个在盒子里的表格。
因此，为了不耗尽该框中的有限位置，只有当输入（textarea、select 等）获得焦点时，联系人表单才会弹出到其完整大小。

当提交按钮被点击时，一个 AJAX 请求被触发。
在 Firefox 下，一切都很好。但在 Chrome 中：

当我单击提交按钮时，表单会恢复到通常的大小，并且不会触发任何 AJAX 请求。

请随时自行查看：http:
//jsfiddle.net/uUgaZ/

实际涉及的代码部分： 

    $('#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");
});
<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>

4

3 回答 3

1

好吧，那是因为，当您尝试单击按钮时，它会聚焦并触发 focusout 事件并隐藏按钮。

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

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

演示

于 2013-07-17T17:55:24.503 回答
1

在您能够完全单击提交按钮之前，您的焦点功能正在运行，您可以像这样解决它。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-17T18:00:56.840 回答
0

只需将您的 focusout 函数内容包装到 setTimeout 中就可以了。

这应该处理得很好。我在提交时收到了警报。希望这可以帮助。

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

$("#helpkontakt textarea, input, select").focusout(function() {
    setTimeout(function(){
        $("#helpkontakt").css("height", "200px");
    },500);
});
于 2013-07-17T18:04:26.553 回答