-2

実際（ウェブサイト上）ボックスにフォームがあります。
そのボックス内の限られた場所を使い果たしてしまわないように、入力 (テキストエリア、選択など) がフォーカスされた場合にのみ、コンタクトフォームがフルサイズでポップアップします。

送信ボタンがヒットすると、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 関数が実行されている場合、次のように解決できます。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 に答える