13

簡単なデモ用の電子メール サインアップ フォームを含む小さなランディング ページを作成しています。フォーカスされたときにフォーム フィールドを開いてから、ぼかしたときに元に戻したいです。

ただし、私が直面している問題は、送信ボタンをクリックすると、ぼかし機能が開始され、ボタンが非表示になり、フォームが縮小されることです。ユーザーがクリックして送信ボタンにフォーカスしている場合にのみ、.blur() メソッドを停止する方法を見つける必要があります。これに対する良い回避策はありますか？

私が得ることができる助けをいただければ幸いです！

4

4 に答える 4

10

それは最も美しい解決策ではありませんが、うまくいきます。これを試して：

$("#submitbtn").mousedown(function() {
    mousedownHappened = true;
});

$("#email").blur(function() {
    if (mousedownHappened) // cancel the blur event
    {
        mousedownHappened = false;
    }
    else // blur event is okay
    {
        $("#email").animate({
            opacity: 0.75,
            width: '-=240px'
        }, 500, function() {
        });

        // hide submit button
        $("#submitbtn").fadeOut(400);
    }
});​

デモはこちら

于 2012-12-05T18:30:37.567 に答える
2

.blur ハンドラ内でこれを試してください:

if ($(':focus').is('#submitbtn')) { return false; }
于 2012-12-05T18:31:54.790 に答える
1

submit代わりにイベントに頼ってみませんclickか？http://jsbin.com/ehujup/5/edit

変更を html と js に結合するだけです

入力をにラップし、明らかに想定されるように電子メールにform追加しますrequired

<form id="form">
 <div id="signup">
   <input type="email" name="email" id="email" placeholder="me@email.com" tabindex="1" required="required">
   <input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2">
 </div>
</form>

jsで、リッスンするハンドラーを削除します#submitbtn 

$("#submitbtn").on("click", function(e){
  e.stopImmediatePropagation();
  $("#signup").fadeOut(220);
});

代わりに送信フォームリスタラーを使用します

$("#form").on("submit", function(e){
  $("#signup").fadeOut(220);
  return false;
});

あなたは$.ajax()それをさらに良くするために使うかもしれません。

これを行うと、検証に関してポイントが得られ、ネイティブ ブラウザーの HTML5 バリデーターは、サポートされている電子メール形式をチェックします。

于 2012-12-05T18:35:34.750 に答える